本篇内容介绍了“微信小程序搜索关键词高亮怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
项目中碰到一个需求,微信小程序搜索数据并且关键词要高亮显示,接到需求,马上开干。先上效果图。
博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常。由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下。
模拟数据如下
list:[
'武汉大学',
'华中科技大学',
'华中师范大学',
'中南财经政法大学',
'中国地质大学',
'武汉理工大学',
'华中农业大学',
'武汉科技大学',
],
在data中定义了一个空数组,用于存放根据搜索key过滤后的数据
filterList:[],//过滤后的
搜索的wxml和方法
// wxml
<view class="search_box">
<input type="text" placeholder="请输入武汉的985/211大学" bindinput="searchValue" class="search"/>
</view>
// 搜索方法
searchValue(e){
let val = e.detail.value;
this.setData({ value:val })
if(val.length > 0){
this.setData({ filterList:[] })
let arr = [];
for(let i = 0;i < this.data.list.length;i++){
if(this.data.list[i].indexOf(val) > -1){
arr.push(this.data.list[i])
}
}
this.setData({ filterList: arr })
}else{
this.setData({ filterList: [] })
}
}
定义了一个高亮组件highlight
"usingComponents": {
"highlight":"../../components/highlight/highlight"
}
在页面中将搜索出来的每一项item和key参数传递给组件
<view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn">
<highlight text="{{ item }}" key="{{ value }}" />
</view>
在组件中接收
properties: {
text:String,
key:{
type:String,
value:'',
observer:'_changeText'
}
}
组件的初始数据
data: { highlightList:[],//处理后的数据 }
组件的wxml
<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>
组件的高亮数据处理
// 非空过滤
_changeText(e){
if(e.length > 0 && this.properties.text.indexOf(e) > -1){
this._filterHighlight(this.properties.text, e);
}
},
/**
* 关键字高亮处理
* @param { String } text - 文本
* @param { String } key - 关键字
*/
_filterHighlight(text, key){
let textList = text.split("");
let keyList = key.split("");
let list = [];
for(let i = 0;i < textList.length;i++){
let obj = {
deep:false,
val:textList[i]
}
list.push(obj);
};
for(let k = 0;k < keyList.length;k++){
list.forEach(item => {
if(item.val === keyList[k]){
item.deep = true;
}
})
}
this.setData({ highlightList:list })
}
“微信小程序搜索关键词高亮怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。