官方的这个method 用来过滤这个只能做到

官方这样子，只能实现从开头匹配

 标签里调用这个方法 :fetch-suggestions="querySearch"querySearch(queryString, cb) {var restaurants = this.restaurants; //  已有的数组var results = queryString   // a?b:c; 三目运算 ?    restaurants.filter(this.createFilter(queryString))// 有输入值则调用过滤方法: restaurants; //没有则返回整个数组// 调用 callback 返回建议列表的数据cb(results); //回调},createFilter(queryString) {return (restaurant) => {  // lambdareturn (restaurant.value  //数组的每个值.toLowerCase()// 转小写：作用是不区分大小写.indexOf(queryString.toLowerCase() // 是否以  queryString 的小写开头// 是0     否-1) === 0  );  // 判断完返回 true /false};},

看到这个就想做模糊查询

做为一个码农，单纯的搬已经不能满足需求了
看看这个链接接着搬
Fuse.js——用于JavaScript中数据的模糊搜索

翻了一堆文档，然后各种报错，引入的时候就报错。。。

然后放弃了，打算写写正则来匹配一下；；；

算了也不想正则；；；

 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);

改成这样：

 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);

或者

 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);

参考

https://www.cnblogs.com/rxbook/p/11820720.html

String对象的方法
方法一: indexOf() (推荐)

var str = “123”;
console.log(str.indexOf(“3”) != -1 ); // true
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

方法二: search()

var str = “123”;
console.log(str.search(“3”) != -1 ); // true
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。

方法三:match()

var str = “123”;
var reg = RegExp(/3/);
if(str.match(reg)){
// 包含
}
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

最后 ele 原文档

<el-autocompletepopper-class="my-autocomplete"v-model="state":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSelect"><iclass="el-icon-edit el-input__icon"slot="suffix"@click="handleIconClick"></i><template slot-scope="{ item }"><div class="name">{{ item.value }}</div><span class="addr">{{ item.address }}</span></template>
</el-autocomplete><style>
.my-autocomplete {li {line-height: normal;padding: 7px;.name {text-overflow: ellipsis;overflow: hidden;}.addr {font-size: 12px;color: #b4b4b4;}.highlighted .addr {color: #ddd;}}
}
</style><script>export default {data() {return {restaurants: [],state: ''};},methods: {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);};},loadAll() {return [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },{ "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },{ "value": "枪会山", "address": "上海市普陀区棕榈路" },{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },{ "value": "钱记", "address": "上海市长宁区天山西路" },{ "value": "壹杯加", "address": "上海市长宁区通协路" },{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },{ "value": "浏阳蒸菜", "address": "天山西路430号" },{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },{ "value": "阳阳麻辣烫", "address": "天山西路389号" },{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }];},handleSelect(item) {console.log(item);},handleIconClick(ev) {console.log(ev);}},mounted() {this.restaurants = this.loadAll();}}
</script>

element el-autocomplete 自动完成的理解相关推荐

AutoComplete - 自动完成插件
AutoComplete - 自动完成插件转载于:https://www.cnblogs.com/zhujiabin/p/4936048.html
UI标签库专题六：JEECG智能开发平台 Autocomplete(自动补全标签 )
1. Autocomplete(自动补全标签) 1.1. 参数属性名类型描述是否必须默认值 name string 控件唯一标示是 null minLength string 触发 ...
Vue+element 解决浏览器自动填充记住的账号密码问题
Vue+element 解决浏览器自动填充记住的账号密码问题参考文章: (1)Vue+element 解决浏览器自动填充记住的账号密码问题 (2)https://www.cnblogs.com/ju ...
SwiftUI 基async/await and actors ObservableObject 实现Autocomplete自动完成组件
实战需求 SwiftUI 基async/await and actors ObservableObject 实现Autocomplete自动完成组件本文价值与收获看完本文后,您将能够作出下面的界面 ...
进入页面 element 校验规则自动校验问题
**进入页面 element 校验规则自动校验问题 change 判断会自动触发. ** 我尝试设置默认值为 [] 也不生效 . 解决方案: 在进来校验前置空校验规则. 可能你在上次关闭页面 ...
jquery.autocomplete自动补全功能
1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http:// ...
jQuery.Autocomplete 自动完成
语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minCh ...
jquery.autocomplete自动完成控件
项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...
Autocomplete 自动补全（Webform实战篇）
开篇语因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...

element el-autocomplete 自动完成的理解

官方的这个method 用来过滤这个只能做到

看到这个就想做模糊查询

参考

https://www.cnblogs.com/rxbook/p/11820720.html

最后 ele 原文档

element el-autocomplete 自动完成的理解相关推荐

最新文章

热门文章