autocomplete: add highlight-first-item prop (#14269)

examples/components/search.vue

@@ -6,7 +6,8 @@
     :fetch-suggestions="querySearch"
     :placeholder="placeholder"
     :trigger-on-focus="false"
-    @select="handleSelect">
+    @select="handleSelect"
+    highlight-first-item>
     <template slot-scope="props">
       <p class="algolia-search-title" v-if="props.item.title">
         <span v-html="props.item.highlightedCompo"></span>

examples/docs/en-US/input.md

@@ -716,6 +716,7 @@ Attribute | Description | Type | Options | Default
 | suffix-icon | suffix icon class | string | — | — |
 | hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
 | popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | true |
+| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false |
 
 ### Autocomplete Slots
 

examples/docs/es/input.md

@@ -705,6 +705,7 @@ Búsqueda de datos desde el servidor.
 | hide-loading          | si se debe ocultar el icono de loading en la búsqueda remota                                                                                       | boolean                         | —                                                              | false        |
 | popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false                 | boolean                         | -                                                              | true         |
 | validate-event        | si se debe lanzar la validación de formulario                                                                                                                 | boolean                         | -                                                   | true         |
+| highlight-first-item | si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada                 | boolean                         | -                                                              | false         |
 
 ### Autocomplete Slots
 

examples/docs/zh-CN/input.md

@@ -867,6 +867,7 @@ export default {
 | suffix-icon | 输入框尾部图标 | string | — | — |
 | hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
 | popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |
+| highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | — | false |
 
 ### Autocomplete Slots
 | name | 说明 |

packages/autocomplete/src/autocomplete.vue

@@ -126,6 +126,10 @@
       popperAppendToBody: {
         type: Boolean,
         default: true
+      },
+      highlightFirstItem: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -176,6 +180,7 @@
           }
           if (Array.isArray(suggestions)) {
             this.suggestions = suggestions;
+            this.highlightedIndex = this.highlightFirstItem ? 0 : -1;
           } else {
             console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
           }