微信小程序实现关键词高亮

1.实现效果

2.实现原理

1.将搜索的值与列表中的每一项进行对比，如果那一项indexOf（搜索值）！=-1，则表示这项中含有该关键字，处理列表，为这一项设置相应的属性。
2.split将字符串和搜索值拆分成数组，循环数组。

3.实现代码

<view class="head flex-row"><view class="head_input"><image src="/img/search_icon.png" class="search_icon"></image><input type="text" placeholder="搜索" placeholder-class="place_holder" bindinput="getValue" value="{{search}}"></input></view><view class="sha_icon" catchtap="clear_input">取消</view>
</view>
<view class="con"><view class="item" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}"><text wx:for="{{item.list}}" class="{{i0.set &&'ative'}}" wx:key="idx" wx:for-item="i0">{{i0.val}}</text></view>
</view>

/* pages/jsCase/keyWordHight/index2.wxss */
.head {position: fixed;top: 0;left: 0;width: 100%;height: 90rpx;box-sizing: border-box;padding: 0 20rpx;background: #fff;
}.head_input {position: relative;flex: 1;margin-left: 12rpx;
}.search_icon {position: absolute;top: 50%;left: 0;margin-top: -15rpx;width: 28rpx;height: 30rpx;padding-left: 23rpx;
}.head input {height: 60rpx;padding-left: 75rpx;font-size: 28rpx;border-radius: 30rpx;background: #F5F5F5;
}.place_holder {font-size: 28rpx;color: #999999;
}.sha_icon {margin-left: 18rpx;font-size: 28rpx;color: #333333;
}.con {padding-top: 90rpx;margin: 0 20rpx;
}.item {border-bottom: 1rpx solid rgb(241, 239, 239);padding: 20rpx 0;font-size: 28rpx;color: #333333;
}.item:last-child {border-bottom: none;
}.ative {color: rgb(76, 156, 221);
}

// pages/jsCase/keyWordHight/index2.js
Page({/*** 页面的初始数据*/data: {search: "",filterList: [],list: [{name: " 上海"},{name: " 江苏"},{name: " 江苏南京"},{name: " 江苏宿迁"},{name: " 江苏苏州"},{name: " 四川"},]},getValue(e) {let val = e.detail.value;this.setData({ search: val })if (val.length > 0) {let arr = [];for (let i = 0; i < this.data.list.length; i++) {if (this.data.list[i].name.indexOf(val) > -1) {arr.push({ name: this.data.list[i].name })}}this.setData({ filterList: arr, }, () => {this.getHighlight(arr, val)})} else {this.setData({ filterList: [], })}},/*** 关键字高亮处理* @param { String } datalist - 文本* @param { String } val - 关键字*/getHighlight(datalist, val) {datalist.forEach(item => {let textList = item.name.split("");let keyList = val.split("");let list = [];for (let i = 0; i < textList.length; i++) {let obj = {set: false,val: textList[i]}list.push(obj);};for (let k = 0; k < keyList.length; k++) {list.forEach(i0 => {if (i0.val === keyList[k]) {i0.set = true;}})}item.list = list;});this.setData({filterList: datalist})},clear_input() {this.setData({search: "",filterList: []})}
})

4.写在最后

看完本文如果觉得有用，记得点赞+关注+收藏鸭

微信小程序实现关键词高亮相关推荐

微信小程序--搜索关键词高亮
代码地址如下: http://www.demodashi.com/demo/14249.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序搜索关键词高亮效果(转)
目录结构 search.html页面 <view class="search"><input focus='auto' bindinput="searc ...
微信小程序实现代码高亮
预览老规矩,先上效果图. 看起来效果还不错,实名感谢日出一点一这位小哥的教程. 因为,当搜索微信小程序实现代码高亮后,结果基本都是微信小程序搜索,关键词高亮这一类的.Onz ,这可真是在 ...
打造热门微信小程序：关键词排名提升的关键因素
打造热门微信小程序并提升关键词排名的关键因素有很多.以下是一些重要的因素,你可以考虑它们来优化你的微信小程序: 1. 关键词优化:选择合适的关键词,并在小程序的标题.描述.标签.内容中合理地运用.确保 ...
PHP“动能”运动膳食微信小程序的开发计算机毕业设计源码504978
摘要近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷畅通的物流快递.安全的信息保护都使得电子商 ...
使用VS Code开发微信小程序
使用VS Code开发微信小程序微信开发工具结构缺点 VS Code VS Code 下载插件 Chinese 小程序开发助手 Easy less minapp vscode wxml wech ...
微信小程序实现搜索关键词高亮
目录 1,前言 2,思路 3,代码逻辑 1,前言项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链 ...
微信小程序新增推广功能，支持自定义关键词
为方便用户找到所需小程序,并帮助小程序更准确地触达用户,微信小程序向开发者提供了自定义关键词的功能.小程序后台新增推广功能,支持开发者添加与业务相关的自定义关键词.开发者可在小程序后台的 " ...
微信小程序实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果一.效果图二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...

微信小程序实现关键词高亮

1.实现效果

2.实现原理

3.实现代码

4.写在最后

看完本文如果觉得有用，记得点赞+关注+收藏鸭

微信小程序实现关键词高亮相关推荐

最新文章

热门文章

微信小程序实现关键词高亮

1.实现效果

2.实现原理

3.实现代码

4.写在最后

看完本文如果觉得有用，记得点赞+关注+收藏鸭 insertAdIfNeeded();

微信小程序实现关键词高亮相关推荐

最新文章

热门文章

看完本文如果觉得有用，记得点赞+关注+收藏鸭