#box{width:100%;高度：600px；框大小：边框框；padding:50px;}本文记录el-autocomplete的使用和两个常见问题。在输入框中输入内容后，会显示相关建议选项的信息，供用户选择。比如用户输入“王”字，那么应该把“王”的所有信息都显示出来，比如“老王”、“王老吉”都出来了，用户点击关联的建议选项，这样用户可以快速输入。最初，当用户的输入框获得焦点，同时当输入框内没有内容时，会呈现用户之前的搜索记录。当用户输入了一些文字但退格键将其一一删除，即用户删除了输入框中的文字，即输入的输入框内容为空时，再次显示历史记录。使用el-autocomplete组件可以快速解决我们的问题，一般情况下回调函数有两个参数，分别是queryString和cb。queryString参数表示的值是用户在输入框中填写的数据值，cb指的是一个函数。这里是高阶函数（curried）的用法，这里不再赘述。cb函数接收一个数组，数组里面是什么，和input输入框关联的下拉框是什么，一一对应。但是，有固定的格式要求。因为在el-autocomplete的底层代码中，有一个v-for循环指令。至于循环数组，是cb函数传过来的数组，所以cb函数中数组的内容就是输入建议下拉框的内容//html部分：fetch-suggestions="querySearch"//jspartquerySearch(queryString,cb){cb([{value:"老王"},{value:"王老吉"}//数组中的每一项都是一个对象，对象中必须有一个value属性，否则无法显示，有无其他属性无所谓。原因是因为源码中定义了value字段])}//如果后端给的数据结构不是这种结构，可以使用数组的filter或者map方法拼装数据结构格式示意图如下：fetch-suggestions也可以传递多个数据，但只能以闭包的形式传递，后面会举例说明。fetch-suggestions用于关联数据搜索。用户输入“王”字得到关联的“老王”和“王老吉”选项值。当用户选择王老吉时，如果是搜索功能，需要搜索王老吉有具体的信息，所以这时候我们就需要用到el-autocomplete的select属性。select属性select也绑定了一个函数方法。当我们在下拉框关联的input输入框中点击选择一个选项时，会得到下拉项对应的框的值。可以将该值传给后台，向后台发送请求，查询选中的某条数据的具体信息。//html部分@select="handleSelect"//js部分handleSelect(item){//参数-选中的itemconsole.log("获取数据作为参数向后端发送请求",item);}trigger-on-focus属性该属性的作用是控制el-input获得焦点时是否触发fetch-suggestions。只要触发fetch-suggestions，就会向后台发送一个请求，出现与input输入框关联的下拉框（inputsuggestionslist）。官方的定义是：默认trigger-on-focus=true，也就是输入框inputboxone获得焦点后会出现输入建议列表。trigger-on-focus="true"方法可用于获取历史搜索数据的场景。毕竟在初始情况下，后台可以提供一些历史数据供用户选择。当然，如果设置了trigger-on-focus="false"，那么在最初获得焦点时不会出现输入建议列表，用户输入文本后才会发送请求。,向后端请求数据。具体使用要看具体需要。先看效果图，再看附上的代码效果图代码
