微信小程序input输入框关键字自动联想及关键字高亮

找了好多博客都没有找到关于小程序，模糊查询，自动联想，和关键字高亮显示的文章，没办法，自己造吧。

本文采用的是动态联想，即在input框中输入关键字后，将关键字作为条件去数据库查询，然后将所有查询结果以json格式返回给小程序的js文件，最后用关键字去匹配返回结果，并将结果中的关键字高亮显示。具体效果如下图所示：

不说其他废话了，直接上干货：
js文件

// pages/search/search.js
Page({data: {// 模糊查询时长timer: 0,// 点击结果项之后替换到文本框的值inputValue: '',// 是否隐藏模糊查询的面板hideScroll: true,// 历史查询记录historySearch: wx.getStorageSync('historySearch') || [],// 模糊查询结果searchTip: []},// onConfirm(e) {//   const keyword = e.detail.value//   console.log('keyword:', keyword)//   if (keyword) {//     this.addHistorySearch(keyword)//     this.searchByKeyWord(keyword)//     this.setData({//       keyword: keyword//     })//   }// },getInf(str, key) {return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%').filter(item => {if (item) {return true}return false})},onInput(e) {const inputValue = e.detail.valueclearTimeout(this.data.timer)let timer = setTimeout(() => {if (inputValue) {// 如果输入的关键字不为空，则发起请求获取联想值const tips = [{ tip: '城市', content: '北京' },{ tip: '大学', content: '北京大学' },{ tip: '专业', content: '北京测绘工程' }]const newTips = tips.map(item => {const { tip, content } = itemconst newContent = this.getInf(content, inputValue)return { tip, content: newContent }})console.log('newTips:', newTips)this.setData({inputValue: inputValue,searchTip: newTips,hideScroll: false})return}// 如果为空，则收起this.setData({searchTip: [],hideScroll: true,inputValue: ''})}, 600)this.data.timer = timer},itemtap(e) {const { info } = e.currentTarget.datasetthis.setData({// 将点击选择的值展示在input框中inputValue: info.content.join(''),// 当用户选择某个联想词，隐藏下拉列表hideScroll: true})this.addHistorySearch(info)// 发起请求，获取查询结果this.searchByKeyWord(info)},searchByKeyWord(info) {// 发起请求，获取面板数据},addHistorySearch(value) {const historySearch = wx.getStorageSync('historySearch') || []// 是否有重复的历史记录let has = falsefor (let history of historySearch) {const { content } = historyif (value.content === content) {has = truebreak}}if (has) {return}const len = historySearch.lengthif (len >= 8) {historySearch.pop()}historySearch.unshift(value)wx.setStorage({key: 'historySearch',data: historySearch,success: () => {this.setData({ historySearch: historySearch })}})}
})

wxml文件：

<wxs src="../../utils/utils.wxs" module="util" />
<view><view class="seachBar"><image src="/images/search.png" style="width:40rpx;height:40rpx" /><input value="{{inputValue}}" focus='true' confirm-type="search" placeholder="搜索感兴趣的城市、大学、专业" bindinput="onInput" /></view><view class="line"></view><view class="search-box" wx:if="{{!inputValue&&historySearch.length>0}}"><view class="border-title">历史搜索</view><view class="search-content"><block wx:for="{{historySearch}}" wx:key="*this"><view class="search-item">{{util.join(item.content)}}</view></block></view></view><scroll-view scroll-y="true" class="search-res" hidden="{{hideScroll}}"><view class="sum">共找到和“{{inputValue}}”相关的结果{{searchTip.length}}个</view><block wx:for="{{searchTip}}" wx:key="content"><view class="tip-item" bindtap="itemtap" data-info="{{item}}"><view class="left"><view class="tip">{{item.tip}}</view><view class="content"><view wx:for="{{item.content}}" wx:for-item="textItem" wx:key="{{index}}" class="{{textItem == inputValue ? 'searchHigh' : '' }}">{{textItem}}</view></view></view><image src="/images/right.png" style="width:36rpx;height:36rpx" /></view></block></scroll-view>
</view>

wxss文件：

/* pages/search/search.wxss */.seachBar {display: flex;flex-direction: row;padding-left: 34rpx;
}.seachBar input {margin-left: 18rpx;
}.line {box-sizing: border-box;border: 2rpx solid rgba(235, 235, 235, 1);margin-top: 28rpx;margin-left: 40rpx;margin-right: 40rpx;
}.search-box {margin-top: 50rpx;margin-left: 40rpx;
}.border-title {font-size: 36rpx;font-weight: 400;color: rgba(51, 51, 51, 1);
}.search-content {display: flex;flex-direction: row;margin-top: 2rpx;flex-wrap: wrap;margin-right: -30rpx;/* margin-top: -30rpx; */
}.search-item {/* width: 160rpx; */padding-left: 28rpx;padding-right: 28rpx;line-height: 62rpx;background: rgba(245, 245, 245, 1);border-radius: 12rpx;text-align: center;margin-right: 30rpx;margin-top: 30rpx;
}.sum {margin-bottom: 20rpx;margin-top: 20rpx;
}.tip-item {display: flex;flex-direction: row;justify-content: space-between;align-items: center;height: 144rpx;border-bottom: 2rpx solid rgba(235, 235, 235, 1);
}.left {display: flex;flex-direction: row;align-items: center;
}.tip {width: 64rpx;line-height: 38rpx;text-align: center;background: rgba(245, 245, 245, 1);border-radius: 6px;font-size: 24rpx;font-weight: 400;color: rgba(102, 102, 102, 1);
}.content {display: flex;font-size: 32rpx;font-weight: 400;line-height: 44rpx;color: rgba(51, 51, 51, 1);margin-left: 22rpx;
}.search-res {box-sizing: border-box;padding-left: 40rpx;padding-right: 40rpx;
}.searchHigh {color: #37C2BC;
}

微信小程序input输入框关键字自动联想及关键字高亮相关推荐

微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
华为手机微信小程序 input输入框上移
不知道大家有木有遇到过微信小程序的input 调起输入法的时候会被挤上去输入框跑到上面去了无论css怎么写怎么布局还是会跑上移尤其是测试mm的华为手机别的手机都OK的解决的方法是给i ...
微信小程序: input输入框placeholder样式的修改
相信大伙在开发微信小程序的时候都会遇到这种问题.因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改.接下来告诉大家怎么修改,该方法仅适用于微信小程序. 一.我们要给pl ...
微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
解决uni-app微信小程序input输入框在底部时，键盘弹起页面整体上移问题
问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下: 在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起 ...
微信小程序input输入框
1.实现input框只能用来传值,不能写数据的办法,是直接让disabled="true"就可以了 <input id='name' disabled="true& ...
微信小程序input输入框校验手机号输入错误
<view class="flex jc-between"><view>联系方式</view><input class="pla ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...

微信小程序input输入框关键字自动联想及关键字高亮

微信小程序input输入框关键字自动联想及关键字高亮相关推荐

最新文章

热门文章