搜索功能：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()，我們無論輸入大小寫或是大小寫混合，都可以搜索出來，去試試吧。

總結

以上是生活随笔為你收集整理的搜索功能支持大小写模糊查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。