输入框输入关键字下拉框的关键字高亮

原创已于 2024-01-17 18:15:09 修改 · 507 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #android

于 2024-01-17 18:09:01 首次发布

本文介绍了一个使用Vue.js开发的搜索功能，通过v-model绑定输入框，当用户输入关键字时，通过seachFn方法动态过滤下拉列表中的项目，仅显示包含关键字的内容。

直接上代码
在这里插入图片描述

//搜索框部分
<div>
	<input v-model='keyWord' />
	<button @click='seachFn'>搜索</button>
</div>
//下拉框部分
<div>
	<div v-html="item.name" v-for='item in droplist' :key='item.id'></div>
</div>
<script>
	export default { 
		data(){
			return {
				keyWord:'',
				droplist:[]
			}
		},
		methods:{
			seachFn(){
			//	假设后台返回的数据
				const res = [{
					id: '2',
					name: ' 哈哈测试号'
				}, {
					id: '3',
					name: '孙悟空大妖怪测试'
				}, {
					id: '5',
					name: '测试白骨精'
				}, {
					id: '6',
					name: '测试号'
				}]
				this.droplist = res.map(item => {
					if (item.name.indexOf(this.keyWord) != -1) {
						//对关键字 进行处理
						let str=`<span style='color:red'>${this.keyWord}</span>`
						
						item.name =
							`<div>${item.name.replace(this.keyWord,str)}</div>`
					}
					return item
				})
				
			}
		}
	}
</script>