微信小程序 实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果
一、效果图
二、实现流程:
- 1.在文本框中输入关键字key,如“比赛”,检索出比赛相关的列表
key = 小程序 - 2.处理结果列表:在key的前后加分隔符,如“%%”
- 3.通过第2步的分隔符进行切割,获取新的数组:str.split("%%")
- 4.页面for循环上面的新数组:与key相等,则高亮显示,否则常规样式显示
三、代码实现
1.search-effects.js 部分代码:
// pages/search-effects/search-effects.js
Page({/*** 页面的初始数据*/data: {searchText:'',//文本框内容searchResultList:[],//搜索结果autoFocus: true,//自动聚焦holdKeyboard: true//focus时,点击页面的时候收齐键盘 true:不收起},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},//文本框输入input(e){// console.log(e)this.setData({searchText:e.detail.value.trim()})//根据名称进行搜索this.getSearchListByName()},//根据名称进行搜索getSearchListByName(){let that = this//模拟数据请求var dataList=[{M_NAME:'小程序教程'},{M_NAME:'2020小程序大全'},{M_NAME:'微信小程序开源框架'},{M_NAME:'微信小程序组件化解决方法'},{M_NAME:'微信小程序API'},{M_NAME:'丰富的微信小程序组件'},{M_NAME:'第三方微信小程序组件'},{M_NAME:'自定义小程序UI组件'},{M_NAME:'小程序可滑动标签的使用'}]var searchResultList = []for(var i=0;i<dataList.length;i++){let obj={M_NAME:dataList[i].M_NAME};//高亮字符串数组obj.searchArray=that.getHilightStrArray(dataList[i].M_NAME,this.data.searchText)searchResultList.push(obj)} that.setData({searchResultList:searchResultList})// wx.request({// url: 'http://192.168.0.76:8080/open/getSearchListByName', // 仅为示例,并非真实的接口地址// data: {// m_name:this.data.searchText// },// method: 'post',// header: {// 'content-type': 'application/json' // 默认值// },// success(res) {// console.log(res)// var searchText = that.data.searchText// if (res.data.errcode === 200) {// var searchResultList = []// //比赛 数据// if(res.data.matchList){// for(var i=0;i<res.data.matchList.rows.length;i++){// let obj={// M_NAME:res.data.matchList.rows[i].M_NAME// };// //高亮字符串数组// obj.searchArray=that.getHilightStrArray(res.data.matchList.rows[i].M_NAME,searchText)// searchResultList.push(obj)// } // }// that.setData({// searchResultList:searchResultList// })// }// },// fail() {// }// })},// 返回一个使用key切割str后的数组,key仍在数组中getHilightStrArray(str,key){return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},
})
2.search-effects.wxml 部分代码:
<!--pages/search-effects/search-effects.wxml-->
<view class="main"><view class="header-search"><image class="searchImg" src="/images/search_icon.png" mode="aspectFill" ></image><input type="text" class="searchInput" focus="{{autoFocus}}" hold-keyborad="true" placeholder="请输入名称进行搜索" placeholder-style="color:#999999" bindinput = "input"></input><view class="clearInput" bindtap = "clearInput" wx:if="{{searchText}}"><image class="clearInputImg" src="/images/clear.png" mode="aspectFill" ></image></view></view><view style="padding: 0 24rpx;"><view class="searchResult" wx:if="{{searchText}}"><view class="searchText" data-type="1" bindtap = "toHandleSearch">搜索"{{searchText}}"</view><view class="border-LR"></view></view><view wx:for="{{searchResultList}}" wx:key="index"><view class="searchResultItem" data-type="2" bindtap = "toHandleSearch"><image class="searchImg2" src="/images/search_icon.png" mode="aspectFill" ></image><view class="searchResultItem-context"><text wx:for="{{item.searchArray}}" wx:for-item="item2" wx:key="index2" style="{{item2 == searchText?'color:#4E70C7':''}}">{{item2}}</text></view></view><view class="border-item-LR"></view></view></view>
</view>
3.search-effects.wxss代码:
/* pages/search-effects/search-effects.wxss */
.header-search{position: relative;margin: 10rpx 24rpx 40rpx 24rpx;
}
/*搜索图标*/
.searchImg{position: absolute;left: 24rpx;bottom: 18rpx;width: 28rpx;height: 28rpx;
}
/*搜索图标*/
.searchImg2{width: 28rpx;height: 28rpx;
}
/*搜索文本框*/
.searchInput{width: 83%;height: 64rpx;font-size: 28rpx;font-family: PingFang SC;font-style: normal;font-weight: normal;line-height: 64rpx;color: #000000;opacity: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;min-height: unset;background: #f9f9f9;border-radius: 200rpx;padding: 0 58rpx;
}
/*清空文本框view*/
.clearInput{width: 100rpx;height: 64rpx;display: flex;align-items: center;justify-content: center;position: absolute;right: 0;bottom: 0;z-index: 10;
}
/*清空图标*/
.clearInputImg{width: 36rpx;height: 36rpx;flex-shrink: 0;
}/*搜索结果*/
.searchResult .searchText{max-width: 93%;font-family: PingFang SC;font-style: normal;font-weight: normal;font-size: 26rpx;line-height: 26rpx;color: #4e70c7;overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;padding-bottom: 40rpx;
}
.searchResultItem {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}
.searchResultItem-context{font-family: PingFang SC;font-style: normal;font-weight: normal;font-size: 26rpx;line-height: 26rpx;color: #000000;margin-left: 20rpx;padding: 24rpx 0;overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;
}
注意:下面的函数 比较关键
//返回一个使用key切割str后的数组,key仍在数组中
//str:字符串 key:关键字
function getHilightStrArray (str,key) {return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
}
参考资料:
https://www.jianshu.com/p/86d73745e01c
微信小程序 实时搜索并高亮关键字相关推荐
- 微信小程序实现搜索关键词高亮
目录 1,前言 2,思路 3,代码逻辑 1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链 ...
- 微信小程序 自定义搜索框并关键字高亮
效果展示: 实现原理: 一共分为两部分,搜索框.展示面板: 搜索框和展示面板根据业务需求,使用了 小程序ui组 tdesign-miniprogram :当然你也可以用原生的输入框做搜索框.差别不大 ...
- wechat微信小程序panda搜索电影(关键字模糊搜索、关键字、类别)
运行结果 点击爱情类别: wxml 这里我把标签数据直接写固定,在实际项目中是不行的,理论上是需要从后端获取. <view class="search"><vie ...
- 微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题 微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
- 微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
- 微信小程序自定义搜索框(searchbar)
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
- ESP8266读DHT11温湿度,开发微信小程序实时显示
ESP8266读DHT11温湿度,开发微信小程序实时显示 第一.原理讲解 第二.ESP8266读取DHT11 第三.温湿度推送到云端 第四.微信小程序开发 个人可免费注册五个微信小程序账号. 第一.原 ...
- 微信小程序页面搜索框查询(无后台接口情况下)
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
- 微信小程序 微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
最新文章
- python的快速入门-1.1、Python快速入门(0529)
- 计算机网络·CSMA/CD协议有关计算
- 别的程序员是怎么读你的简历的
- Buuctf(pwn) ciscn_2019_n_5
- OpenCV iOS-图像处理
- 机器学习-集成学习-提升树-LightGBM
- maven 父maven_Maven的鸟瞰图
- DevOps时代,企业数字化转型需要强大的工具链
- Windows下pip安装scipy报错no lapack/blas resources found
- Objective-C对象模型及应用
- java 设计数据字典_应用开发中数据字典项设计实现方案
- vue加载中展示【nprogress(进度条)Lottie(动画)】
- BZOJ2434[Noi2011]阿狸的打字机——AC自动机+dfs序+树状数组
- 香港服务器要个人信息么,香港个人信息应当遵循服务器23.225合法
- ajax + laypage实现分页
- 系统级程序设计第二次作业
- 湖南多校对抗赛(2015.03.28) H	 SG Value
- 无法打开物理文件 “XXX.mdf“ 操作系统错误 5:“5(拒绝访问。)“
- c语言程序设计精髓第八章编程题
- 麦中凡教授的精彩观点
热门文章
- c语言卸载了软件打不开了,控制面板卸载不了程序,手把手教你如何处理控制面板中卸载不掉的软件...
- OpenCv算法的基本介绍与应用
- 微信Mars-xlog日志加密踩坑指南
- springBoot使用RestTemplate报错:No instance available for xxx.xxx.xxx.xxx
- 安卓手机测评_鲁大师又在找事?一季度安卓系统流畅度排名出炉,小米MIUI吊车尾...
- python用电度数设计_用Python实现一个爬取XX大学电费通知的小脚本
- 解决Photoshop CS3 输入中文不能显示 输入文字不能显示 输入文字显示缓慢
- 计算机的许可服务在哪里打开,Win10服务在哪里,怎么打开Win10服务列表?
- HTML入门学习-含代码和配套资料
- 2022年——CSDN有一个充满活力的【红目香薰】