一般項目中會有搜索，有了搜索就會有關鍵字高亮，還是多個關鍵字搜索高亮。下面就是我為大家整理的。

直接上代碼（js中）

//重要部分**var seArr = e.detail.value.replace(' ', '');****var searchArr = seArr.split('');**var tielies = arr[i].title.split('');var titleArr = [];for (let j = 0; j < tielies.length; j++) {var a = {text: '',type: 1}a.text = tielies[j];searchArr.forEach(v => {// console.log('v' + ':' + v + 'searchArr' + '' + searchArr)if (v.toLocaleLowerCase() == tielies[j] || v.toLocaleUpperCase() == tielies[j] ) {a.type = 2}})titleArr.push(a);arr[i].titlearr = titleArr;

全部的js

bindInput: function(e) {var that = this;that.setData({text: e.detail.value})var seArr = e.detail.value.replace(' ', '');var searchArr = seArr.split('');wx.request({url: ***********,method: 'post',success(res) {//(res.data.data)if (res.data.code == 1) {var arr = res.data.data;// console.log(arr)for (let i = 0; i < arr.length; i++) {if (arr[i].title.length > 11) {arr[i].title = arr[i].title.substring(0, 11) + '';}if (arr[i].content.length > 25) {arr[i].content = arr[i].content.substring(0, 25) + '...';}var tielies = arr[i].title.split('');var titleArr = [];for (let j = 0; j < tielies.length; j++) {var a = {text: '',type: 1}a.text = tielies[j];searchArr.forEach(v => {// console.log('v' + ':' + v + 'searchArr' + '' + searchArr)if (v.toLocaleLowerCase() == tielies[j] || v.toLocaleUpperCase() == tielies[j] ) {a.type = 2}})titleArr.push(a);arr[i].titlearr = titleArr;}}}}})},

（wxml中）

<input class="search_arr1" placeholder="請輸入需要的產品" value="{{keyName}}" bindinput="bindInput" /><text class="text1 {{i.type == 2 ? 'searchHigh' : '' }}" wx:for='{{item.titlearr}}' wx:key="index" wx:for-item="i">{{i.text}}</text>

當然，這是調接口來實現的，如果自己寫也可以
如果有更好的方法，歡迎一起討論

總結

以上是生活随笔為你收集整理的微信小程序搜索多个关键字高亮的全部內容，希望文章能夠幫你解決所遇到的問題。

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