1、具体实现功能:本次使用的是autocomplete(自动完成)标签,用来做在输入框中输入数据后会出现提示列表。
![](https://i-blog.csdnimg.cn/blog_migrate/fa3fd381c152b6362d7566a5c0e06c5d.png)
2、标签中的属性
(1)v-model:"school":当用户选择提示框中的某一项(item)时,该项(item)中的value值会给属性school赋值(this.school=item.value)。
(2):fetch-suggestions="querySchool"如下图所示,在调用querySchool(queryString,callback)方法时,其中参数:“querySchool”是用户在输入框中输入的数据,“callback(schoolList)”是通过用户输入的数据到后端发起请求(模糊查询)将查询到的数据封装到schoolList[]中,代用callback方法就可以将查询到的数据显示“提示框中”如图 3所示。其中需要回调的数据需要含有value属性,提示框中显示的数据就是value所对应的值。
注意:在往数组schoolList[]中存贮数据前,先清空数组。
![](https://i-blog.csdnimg.cn/blog_migrate/f15b0143e49325c46175aea7b64c713c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2de19fb75c2d420d5e7f6bc8cb73d1b2.png)
(3):trigger-on-focus="true",在用户输入数据后,显示提示的内容,为false时会隐藏提示的内容。
(4)@select=“handleSchool”当用户点击提示框中的某一项时,会触发@select事件,例如:当点击“烟台大学”时,会触发@select事件,在handleSchool(item)方法中会获取当前项(item是一个对象形式数据)的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/11ad0b342dc63d3ce4671f71f2fbec65.png)