效果如图所示
思路就是,把搜索出来的内容切割成一个个字,然后找搜索框里面的字,如果一样的话,flag设置为true
下面直接贴代码吧
wxml
<view class="input {{flag?'':'eight'}}">
<icon type="search" size="23" color=""></icon>
<input type="text" placeholder="请输入" bindinput="bindKeyInput" bindfocus='bindfocus' value="{{value}}" />
</view>
<view wx:for='{{searchList}}' bindtap='choosePhone' data-name='{{item.name}}' data-phone='{{item.phone}}'>
<view>
<view class="name">
<text class="{{a.flag?'blue':''}}" wx:for='{{item.aa}}' wx:for-item='a'>{{a.name}}</text>
</view>
<view class="unit">{{item.unit}}</view>
</view>
<view style="color: black;font-size: 32rpx;">{{item.phone}}</view>
</view>
wxss
.blue {
color: #25AFF6 !important;
font-weight: bold;
}
js
// 高亮的代码
let list = res.result
let name = []
for (let [index, s] of list.entries()) {
let aa = []
name = s.name.split('')
for (let [index, n] of name.entries()) {
aa.push({
name: n,
flag: false
})
s.aa = aa
}
}
// 高亮的代码
let listr = that.data.searchList
for (let i of listr) {
for (let s of i.aa) {
if (str.indexOf(s.name) !== -1) {
s.flag = true
console.log(listr);
that.setData({
searchList: listr
})
} else {
s.flag = false
that.setData({
searchList: listr
})
}
}
}