关于VUE中input输入后出现下拉框出现提示的小技巧

怎么在VUE中出现类似于百度,谷歌那种输入后出现下拉提示框?
由于我用的是饿了么开发的element-ui前端开发框架,所以可以用element-ui的input组件中的el-autocomplete http://element-cn.eleme.io/#/zh-CN/component/input

querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
},
createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
}

这是例子的中算法。其实很简单,就是indexOf的简单应用。
但是这个===0只能从开头匹配。全字段匹配就要改成>-1

after.png

before.png

可以参考我自己写的例子
Github:https://github.com/fredfeng0326/inputsearch
实例地址: <https://fredfeng0326.github.io/inputsearch/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容