搜索功能支持大小写模糊查询

搜索功能：https://blog.csdn.net/bbs11007/article/details/110948483

 

搜索功能我们已经实现了，那么怎么支持大小写匹配？模糊查询我们需要用到一个函数是：toUpperCase()，

let result = this.pages1.values.filter(row => {//this.pages1.values这个是表内所有数据//搜索那列的内容，这里搜索name、id等列的内容return row.name.indexOf(this.search1.toUpperCase()) > -1 || row.id.indexOf(this.search1.toUpperCase()) > -1 || row.code.indexOf(this.search1.toUpperCase()) > -1 || row.note.indexOf(this.search1.toUpperCase()) > -1;});

 

js中的写法是：

if (td.innerHTML.toUpperCase().indexOf(filter) > -1 || td1.innerHTML.toUpperCase().indexOf(filter) > -1 || td2.innerHTML.toUpperCase().indexOf(filter) > -1)

这个也没有什么好说的。只是加的位置不同。

 

课外：

VUE的搜索大概写法：

contains(prop, str) { //打包到服务器：if (prop === null || prop === undefined) {return false;} else {return prop.indexOf(str) > -1;//如果需要大小写匹配//return prop.indexOf(str.toUpperCase()) > -1;}}, let result = this.pages1.values.filter(row => {//this.pages1.values这个是表内所有数据//搜索那列的内容，这里搜索name、id等列的内容return this.contains(row.name, this.search1) || this.contains(row.id, this.search1) || this.contains(row.code, this.search1) || this.contains(row.note, this.search1) });

 

大小写模糊匹配，如果这么写：

return prop.indexOf(str.toUpperCase()) > -1;

打印看下：

console.log("搜索结果：",this.contains("test0308","test0308"));

你会发现如果是大写的:TEST,你搜索时输入test或TEST都搜索出来。但是内容是小写的：test，这个你输入test或TEST都搜索不出来。

所以我改成：

return prop.indexOf(str.toUpperCase()) > -1 || prop.indexOf(str) > -1;

这样你会发现：test这个内容，输入test小写可以搜索出来，但是输入TEST搜索不出来。这么写如果含有小写的话（如Test），只能要严格区分大小写，如果没有小写（如TEST），全是大写就不区分大小写。

思考：这是什么原因？怎么改？

这个问题在.toUpperCase()中，原来它是转换成大写，也就是说我们this.contains(左,右)这个左右两边对比不等的问题，我们上面发现右边 .toUpperCase()变为大写，而左边没有变，所以导致不相等。所以左边也要 .toUpperCase()，

这样我们就改成：

return prop.toUpperCase().indexOf(str.toUpperCase()) > -1;

这样子左右两边都 .toUpperCase()，我们无论输入大小写或是大小写混合，都可以搜索出来，去试试吧。

总结

以上是生活随笔为你收集整理的搜索功能支持大小写模糊查询的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。