为更好用户体验及设计效果,搜索结果列表都是需要对关键词进行高亮显示的,对关键词进行“<text class='high'>关键词</text>”样式定义,如果通过服务端返回wxml格式,在页面是不会被解析的,直接显示代码了,所以就需要在前端进行处理,先附上代码:
JS代码:
// pages/test/index.js
// 分割函数
const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
Page({
/**
* 页面的初始数据
*/
data: {
keyword: '',
// 定义测试数据
listData: [ ]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 高亮搜索关键字
searchTap: function () {
var listData = [
{ title: "中国人5000年前就会酿啤酒" },
{ title: "黄萼裳裳绿叶稠,千村欣卜榨新油黄萼裳裳绿叶稠,千村欣卜榨新油" },
{ title: "文明悠久灿烂,丝绸之路北线从此出中亚,自古为兵家必争之地" },
{ title: "中国人5000年前就会酿啤酒" },
{ title: "黄萼裳裳绿叶稠,千村欣卜榨新油黄萼裳裳绿叶稠,千村欣卜榨新油" },
{ title: "文明悠久灿烂,丝绸之路北线从此出中亚,自古为兵家必争之地" }
];
for (var i = 0; i < listData.length; i++) {
var dic = listData[i];
var text = dic.title;
dic.title = getInf(text, this.data.keyword);
}
this.setData({
listData: listData
});
},
//提交表单搜索
searchSubmit: function (e) {
var keyword = e.detail.value.keyword;
if (keyword == '' || keyword == null) {
wx.showToast({
title: '请输入搜索关键词',
icon: 'none'
})
} else {
// 赋值关键词
this.setData({
keyword: keyword
});
// 执行高亮关键字函数
this.searchTap();
}
},
})
wxml代码:
<!--pages/test/index.wxml-->
<form bindsubmit="searchSubmit">
<input type='text' name="keyword" class="input-text" confirm-type="search" value="{{keyword}}" placeholder="请输入搜索关键字" />
<button type="primary" form-type='submit'>搜索</button>
</form>
<view wx:for="{{listData}}" wx:key="title" wx:for-index="index" class="item">
<view>
<text wx:for="{{item.title}}" wx:key="title" class="{{item == keyword ? 'high' : '' }}">{{item}}</text>
</view>
</view>
CSS代码:
/* pages/test/index.wxss */
.input-text{ background: #eee; border: 1px solid #ccc; background: #f5f5f5; padding: 10px 20px; margin: 10px; }
.item{ border: 1px solid #ccc; padding: 10px; margin: 10px; }
.high{ background: #ffffae; color: #f00; }
原理是,对列表中标题切割为数组,切割字符串为输入的关键词,然后在页面循环列表中增加循环标题数组,如果和关键词一致,则添加上高亮代码,最后增加样式优化高亮效果,最终效果如下:
