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>标签替换相同字段