博客

一、实现功能：

通过搜索框搜索关键字，将搜索得到的结果里包含关键字的字体实现高亮的效果

二、实现思路：

使用js的indexof()方法检验是否包含某字符串，以及unshift() 方法可向数组的开头添加元素，新加一个key属性，将含有关键字的那部分字符串的key属性标记为true，其他均为false

三、核心代码：

tips：使用uni-app框架，使用原生的朋友请自行修改对应的代码即可。

html部分：

<template>
	<view>
		<view class="searchBox">
			<view class="searchImgBox">
				<image class="searchImg" src="/static/home/speaker.png"></image>
			</view>
			<input placeholder="请输入要搜索的问题" v-model="searchInput" class="searchText"></input>
			<view class="searchImgBox" @tap="searchQuestion">
				<image class="searchImg" src="/static/home/search.png"></image>
			</view>
		</view>
		<view class="questionBox" v-for="(item,index) in getQuestion" :key="index">
			<view class="topBox">
				<view class="iconBox">
					<image class="questionIcon" src="/static/question/question.png"></image>
				</view>
				<block v-for="(item2,index) in item">
					<text class="questionText" v-if="item2.key==true" style="color: red;">{{item2.str}}</text>
					<text class="questionText" v-else>{{item2.str}}</text>
				</block>
			</view>
			<view class="numberBox">
				<view class="nunberText">{{item[0].number}}人满意</view>
			</view>
		</view>
	</view>
</template>

js部分：

<script>
	export default {
		data() {
			return {
				getQuestion: [{
						str: "减肥能否喝酒",
						number: 12,
						key:false
					},
					{
						str: "固定食谱能减肥吗",
						number: 8,
						key:false
					},
					{
						str: "吃苹果能不能减肥",
						number: 25,
						key:false
					}
				],
				searchInput:""
			}
		},
		methods: {
			searchQuestion() {
				var that=this
				let hilight_word = function(key, word,number) {
					//indexof方法的作用：判断是否包含传入参数，返回大于等于0的值表示包含
					let idx = word.indexOf(key);
					let t = [];
					if (idx > -1) {
						if (idx == 0) {
							t = hilight_word(key, word.substr(key.length));
							t.unshift({
								key: true,
								str: key,
								number:number
							});
							return t;
						}
						if (idx > 0) {
							t = hilight_word(key, word.substr(idx));
							t.unshift({
								key: false,
								str: word.substring(0, idx),
								number:number
							});
							return t;
						}
					}
					return [{
						key: false,
						str: word,
						number:number
					}];
				};
				let searched = [];
				let inputs = this.searchInput;
				for (let i = 0; i < that.getQuestion.length; i++) {
					var current_word = that.getQuestion[i].str;
					var number = that.getQuestion[i].number;
					if (current_word.indexOf(inputs) > -1) {
						searched.push(hilight_word(inputs, current_word,number))
					}
				}
				this.getQuestion = searched;
				// console.log(this.getQuestion)
			}
		},
		onLoad() {
			
		}
	}
</script>

四、实现效果图