uni-app微信小程序——实现搜索关键字高亮

本文介绍如何在uni-app微信小程序中实现在搜索结果中关键字高亮显示的功能。通过js的indexOf()方法检查字符串,使用unshift()方法添加key属性标记含有关键字的部分,并在html中应用这些标记来实现高亮。
摘要由CSDN通过智能技术生成

一、实现功能:

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

二、实现思路:

使用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="q
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值