:
fetch
-
suggestions
=
"querySearch"
placeholder
=
"输入内容"
:
trigger
-
on
-
focus
=
"false"
@keyup
.
enter
.
native
=
"search"
@select
=
"handleSelect"
>
<
i slot
=
"suffix"
class
=
"el-icon-search"
@click
=
"search"
>
<
/
i
>
<
/
el
-
autocomplete
>
search() {
this.$refs.autocomplete.suggestions = [];
问题已解决，在点击回车和icon搜索图标时会收起建议框
我曾尝试使用其他Vue Google自动完成组件，但没有找到能满足我需要的组件。 因此，在下面我想提一下您可以从这个确切的组件中得到什么：
加载多个自动完成输入（我无法使用现有的vue组件实现此目的）
获取找到的地址对象的地理位置数据（纬度，经度）以及其他地址数据（国家，城市，州，县，街道，门牌号，邮政编码）。 因此，无需在后端执行其他地址解析请求。
没有外部依赖
您可以访问基础以获取有关找到的位置的更多详细信息。 您可以指定要从PlaceResult对象获取的特定字段。
您可以将结果限制为特定的国家或使用用户地理位置数据
该组件使用Google Maps Places API来获取自动完成的地理建议，因此您必须在HTML的<head>
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据
官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。
-mock数据的获取-
我们要获取远程mock中所有学生的学号信息，根据输入的数据来远程查找目标，并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息，实现快速获取信息的功能，再也不用手动一个个去输入所有的数据啦～
在template中添加el-autocomplete
<el-autocomplete
placeholder="请输入studentID"
npm install --save react-abstract-autocomplete
import AutoComplete , { Completion } from 'react-abstract-autocomplete' ;
const users = [ ] ;
const chatCommands = [ ] ;
< AutoComplete xss=removed>
< Completion xss=removed xss=removed xss=removed>
< Completion trigger = "/" completions = { chatCommands } minLength
sql自动完成
为关键字，表或列生成有效的自动完成建议。
支持MySQL，T-SQL（SQL Server），PL / pgSQL（PostgreSQL）和PL / SQL（Oracle）方言。
npm install sql-autocomplete
import { SQLAutocomplete , SQLDialect } from 'sql-autocomplete' ;
const sqlAutocomplete = new SQLAutocomplete ( SQLDialect . MYSQL ,
[ 'myDatabaseTableName' ] , // Optional
Google自动完成
我之所以分享这个组件，是因为我不胜枚举复杂的示例来完成这项简单的工作。 因此，在解释过程中，我将尽量做到简单。
Google Autocomplete组件不过是官方Google Places API的Vue.js包装器。 尽管使用Vue.js编写了演示，但可以从任何JS框架提取Autocomplete对象。
您将必须安装Vue＆Vuemit：
npm install vue -- save
npm install vuemit -- save
用于管理google组件与其父组件之间的事件。
注意：如果碰巧正在使用Vue 1.* ，则必须从分支中拉出。
el-autocomplete 配合 @keyup.enter.native 使用时，无法关闭搜索建议弹框问题解决方案
使用场景，本人使用element ui 时由于业务需求，需要用到一个搜索业务，看着 el-autocomplete 这个组件感觉蛮适合的，于是便踩入这个坑中。因为需要同时存在搜索建议列表和点击enter跳转搜索结果页需求，使用enter点击跳转后，无法在跳转完成时隐藏掉之前的搜索建议，通过鼠标点击其他元素却可以关闭，开始以为是因为 input 的 focus 问题，便写了一个隐藏的inp
