Autocomplete: add placement attribute (#10475)

examples/docs/en-US/input.md

@@ -702,6 +702,7 @@ Attribute | Description | Type | Options | Default
 |icon | icon name | string | — | — |
 |value | binding value | string | — | — |
 | debounce | debounce delay when typing, in milliseconds | number | — | 300 |
+| placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
 |fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
 | popper-class | custom class name for autocomplete's dropdown | string | — | — |
 | trigger-on-focus | whether show suggestions when input focus | boolean | — | true |

examples/docs/es/input.md

@@ -681,6 +681,7 @@ Atributo | Descripción | Tipo | Opciones | Por defecto
 |icon | nombre del icono | string | — | — |
 |value | valor enlazado | string | — | — |
 | debounce | retardo al escribir, en milisegundos | number | — | 300 |
+| placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
 |fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
 | popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
 | trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |

examples/docs/zh-CN/input.md

@@ -854,6 +854,7 @@ export default {
 | value-key | 输入建议对象中用于显示的键名 | string | — | value |
 | value         | 必填值，输入绑定值   | string  | — | — |
 | debounce      | 获取输入建议的去抖延时 | number         | — | 300 |
+| placement     | 菜单弹出位置 | string         | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
 | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
 | popper-class | Autocomplete 下拉列表的类名 | string | — | — |
 | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |

packages/autocomplete/src/autocomplete.vue

@@ -40,7 +40,7 @@
       :class="[popperClass ? popperClass : '']"
       :popper-options="popperOptions"
       ref="suggestions"
-      placement="bottom-start"
+      :placement="placement"
       :id="id">
       <li
         v-for="(item, index) in suggestions"
@@ -113,6 +113,10 @@
       debounce: {
         type: Number,
         default: 300
+      },
+      placement: {
+        type: String,
+        default: 'bottom-start'
       }
     },
     data() {

types/autocomplete.d.ts

@@ -1,5 +1,7 @@
 import { ElementUIComponent } from './component'
 
+export type SuggestionPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+
 export interface FetchSuggestionsCallback {
   /**
    * Callback function used in fetch-suggestions function
@@ -33,6 +35,9 @@ export declare class ElAutocomplete extends ElementUIComponent {
   /** Debounce delay when typing */
   debounce: number
 
+  /** Placement of the popup menu */
+  placement: SuggestionPlacement
+
   /** Name for the inner native input */
   name: string