微信小程序搜索多个关键字高亮

一般项目中会有搜索，有了搜索就会有关键字高亮，还是多个关键字搜索高亮。下面就是我为大家整理的。

直接上代码（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>

当然，这是调接口来实现的，如果自己写也可以
如果有更好的方法，欢迎一起讨论

微信小程序搜索多个关键字高亮相关推荐

微信小程序--搜索关键词高亮
代码地址如下: http://www.demodashi.com/demo/14249.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
微信小程序搜索组件wxSearch
微信小程序搜索组件wxSearch wxSearch优雅的微信小程序搜索框一.功能支持自定义热门key 支持搜索历史支持搜索建议支持搜索历史(记录)缓存二.使用 1.将wxSearch文件夹 ...
dwcs6怎么添加搜索框_一文教会你微信小程序搜索怎么用、怎么优化
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...
小程序搜索框_微信小程序搜索及优化相关知识科普
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...
微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能
微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多 wxml页面 <view class="search-he ...
如何给微信小程序搜索优化？
微信小程序搜索优化(Mini Program SEO)是指针对微信小程序的搜索引擎优化,通过优化小程序内容.引流渠道等手段来提高小程序的曝光率和用户转化率. 以下是一些给微信小程序搜索优化的方法: 1 ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序搜索php,如何解决微信小程序没有模糊搜索功能
现在微信小程序有重新推出新的功能,那就是进行模糊搜索,但是很多朋友微信小程序没有模糊搜索功能怎么办,下文小编就为大家带来详细介绍,一起看看吧现在微信小程序有重新推出新的功能,那就是进行模糊搜索,用户 ...

微信小程序搜索多个关键字高亮

微信小程序搜索多个关键字高亮相关推荐

最新文章

热门文章