uniapp搜索联想功能
简单实现搜索联想功能
·
html代码段
<view class="inputText">
<input :value="inputText" @input="textDeal" />
</view>
<view class="resList">
<view v-for="(item,index) in textArr">
<rich-text :nodes="item.text"></rich-text>
</view>
</view>
js代码段
data() {
return {
inputText:'',
resText:'', // 结果文本
textArr:[], // 渲染数组
textArrTwo:[{ // 模拟搜索结果
text:'天津城建大学'
},{
text:'天津工业大学'
},{
text:'山东大学'
},{
text:'重庆大学'
},{
text:'四川大学'
}],
}
},
methods: {
// 文本处理
textDeal(e){
this.textArr = JSON.parse(JSON.stringify(this.textArrTwo))
let inputText = e.detail.value; // 搜索内容
this.textArr.forEach((item,index) =>{ // 循环遍历搜索结果
if(!(item.text.indexOf(inputText) == (-1))){ // 匹配到相同字符串
this.textArr[index].text = item.text.replace(inputText,`<span style="color:red" >${inputText}</span>`) // 添加文本样式
}
})
}
}
利用indexOf来查找相同字段,然后用<span>标签替换相同字段
更多推荐
已为社区贡献4条内容
所有评论(0)