uni-app 实现搜索关键词高亮效果

1. 前言

根据关键字搜索相关地理位置的需求，并把关键词高亮显示，关键词输入提示用到了腾讯地图的sdk，帮助用户快速输入，详情见腾讯地图 getSuggestion，这其实是一个挺常见的需求，所以想记录一下。

想实现的效果：

2. 实现逻辑

1. 使用腾讯地图sdk 关键词输入提示，过滤出符合条件的值
2. 过滤出来的值要添加样式，达到想要的高亮效果。
3. 需要正则匹配，模糊查询展示高亮。

正则表达式文档
new RegExp(pattern, attributes) JavaScript RegExp 对象
replace() 方法用于在字符串中用一些字符替换另一些字符
stringObject.replace(regexp/substr,replacement) replace() 方法

3. 封装搜索关键词方法

 // 搜索关键词
export function searchKeyword (keyword, city) {return new Promise((resove, reject) => {const qqmapsdk = new QQMapWX({key: 'VNBBZ-SKMRW-U5TR5-OIYQZ-VEOMF-IABLP',  //之前在腾讯位置服务申请的key})qqmapsdk.getSuggestion({keyword: keyword,  //搜索关键词region: city,  //城市名region_fix: 1, //固定在当前城市success: (res) => {resove(res)},fail: (e) => {reject(e)},})})
}

4. 实现代码

<template><view class="select_root"><!-- 地址搜索 --><view class="searchCon"><view class="cityCon" @click="getCityList"><text class="city u-line-1">{{ city }}</text><u-icon name="arrow-down" color="#474A54" size="10"></u-icon></view><view class="searchInput"><u-searchplaceholder="请输入地址"v-model="keyword"shape="square":clearabled="true"height="65rpx"bgColor="#F5F6FA"borderColor="#ECECEC":animation="true":showAction="false"@change="getsuggestList"></u-search></view></view><!-- 搜索地址结果 --><view class="filterList" v-if="filterList.length > 0"><scroll-viewscroll-yscroll-with-animation:scroll-top="scrollTop":style="{ height: `calc(100vh - 53px)` }"><block v-for="(item, index) in filterList" :key="index"><view class="item" @click="selectFilterLocation(item)"><rich-text :nodes="item.titleStyle" class="filterTitle"></rich-text><view class="address">{{ item.address }}</view></view></block></scroll-view></view><!-- 无搜索结果 --><view class="filterList" v-if="filterList.length === 0 && showEmpty"><u-emptymode="search"text="没发现这个地址，换个关键词试试吧~"marginTop="100"/></view></view>
</template>
<script>
import { searchKeyword } from '@/utils/tool.js'
export default {data() {return {city:'青岛' keyword: '', //搜索关键词filterList: [], //搜索结果showEmpty: false, // 搜索空状态}},methods:{// 点击搜索的任意一条selectFilterLocation(e) {//做一些存储操作或者根据项目需求自己改uni.setStorageSync("xxx", e)this.filterList = []this.keyword = '' },// input输入框发生改变getsuggestList(keyword) {if (keyword === '') {this.filterList = []this.showEmpty = falsereturn}//过滤符合条件的值searchKeyword(keyword, this.relocation.city).then((res) => {console.log(res, '筛选数组');let sug = []res.data.forEach((item) => {sug.push({id: item.id,location: item.title,titleStyle: this.join(item.title, keyword),address: item.address,city: item.city,lat: item.location.lat,lng: item.location.lng,})})this.filterList = sugif (this.filterList.length === 0) {this.showEmpty = true} else {this.showEmpty = false}}).catch((err) => {console.log(err)})},// 拼接  关键词高亮join(str, key) {var reg = new RegExp(`(${key})`, 'gm')var replace = '<span style="color:#F3671A;font-weight:bold;">$1</span>'return str.replace(reg, replace)},</script>
<style lang="scss" scoped>.searchCon {display: flex;align-items: center;padding: 0 22upx;box-sizing: border-box;background: #fff;border-bottom: 1upx solid #eee;.cityCon {margin-right: 36upx;display: flex;align-items: baseline;.city {max-width: 155upx;font-size: 27upx;margin-right: 8upx;}}.searchInput {flex: 1;margin: 18upx auto;}}.filterList {position: absolute;top: 106upx;bottom: 0;left: 0;right: 0;background: #fff;padding: 0 22upx;.item {padding: 22upx 0;border-bottom: 1upx solid #eee;.filterTitle {font-size: 30upx;color: #333;}.address {font-size: 26upx;color: #999;}}}
</style>

打印筛选数组

5. js重点 == 处理高亮

字段高亮处理     titleStyle: this.join(item.title, keyword),
处理的函数       this.join();

6. 可参考

uni-app 搜索内容高亮（源码分享）
微信小程序根据关键字查询相关地理位置，并将搜索结果中的关键字高亮显示

uni-app 实现搜索关键词高亮效果相关推荐

微信小程序搜索关键词高亮效果(转)
目录结构 search.html页面 <view class="search"><input focus='auto' bindinput="searc ...
微信小程序--搜索关键词高亮
代码地址如下: http://www.demodashi.com/demo/14249.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序实现搜索关键词高亮
目录 1,前言 2,思路 3,代码逻辑 1,前言项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链 ...
搜索关键字高亮_Django Haystack 全文检索与关键词高亮
作者:HelloGitHub-追梦人物[1] 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的"阅读原文"即可获取博客提供 RS ...
Diango博客--22.Django Haystack 全文检索与关键词高亮
文章目录 1. Django Haystack 简介 2. 安装 django-haystack和elasticsearch 2 3. 构建容器来运行 elasticsearch 服务 4. 配置 H ...
android关键词检索功能,Android实现搜索关键词高亮显示-Kotlin
在做Wandroid项目时有一个搜索功能,要在搜索结果中将匹配到的关键词高亮显示.但是玩安卓API并没有提供颜色的高亮,只有字体斜体,效果看起来并不明显,并且昵称也参与了搜索,但并没有增加HTML标 ...
C#中搜索关键词高亮显示
在搜索关键词高亮中一般的方法都是采用替换的办法(Replace)这个方法有一个缺点就是不能区分大小写的问题.在网上找了找发现有人用正则表达式的方法来解决这个问题还真不错,效率也比较高,归纳如下,有用得 ...
wordpress实现搜索页关键词高亮
http://www.hehaibao.com/wordpress-search-word-highlight/ 今天给网站搜索页加了关键词高亮功能,分享出来,希望对小伙伴们有所帮助. 实现效果如下图 ...
小程序-输入关键字搜索，关键字在搜索列表中高亮效果
这里写自定义目录标题小程序-输入关键字搜索,关键字在搜索列表中高亮效果小程序-输入关键字搜索,关键字在搜索列表中高亮效果第一步:按照网上大神写的思路,在截取首位关键字空格方法出现找不到repl ...
05-Elasticsearch-DSL高级检索[分页, 分词, 权重, 多条件, 过滤, 排序, 关键词高亮, 深度分页, 滚动搜索, 批量Mget]...
DSL搜索词库准备骚年帅气新闻网新闻闻网新闻网索引准备 PUT /shop {"settings": {"number_of_shards" ...

uni-app 实现搜索关键词高亮效果

1. 前言

2. 实现逻辑

3. 封装搜索关键词方法

4. 实现代码

5. js重点 == 处理高亮

6. 可参考

uni-app 实现搜索关键词高亮效果相关推荐

最新文章

热门文章