uniapp开发微信小程序之搜索联想、高亮显示（附demo）

本文链接：https://blog.youkuaiyun.com/superpole/article/details/143012647

小程序比较常见的功能就是搜索，搜索的一个体验点就联想、高亮显示，惯例还是先看效果。

实现效果

实现思路

1) uni-search-bar搜索框，监听input事件，触发搜索联想

2）调用后台接口，根据分词查询数据（Top N），返回前端数据

3）前端利用正则表达式，匹配数据中的分词，添加高亮样式

4）v-html标签显示内容

5）行记录监听click事件，跳转详情页

引入组件

先引入uni-search-bar，展示搜索框

前端代码

index.vue:uni-search-bar搜索框，跳转搜索页

    <view @click="search" class="search-area">      <uni-search-bar readonly radius="100" cancelButton="none" placeholder="成语检索" bgColor="#f8f8f8"/>    </view>

    methods: {      search(){        uni.navigateTo({url:'/pages/index/search'});      }    }

search.vue:搜索联想、高亮显示

  <view>    <uni-search-bar radius="100" :focus="true" cancelButton="none" placeholder="学富五车" v-model="keys" @input="search" />  </view>  <uni-list  v-for="(idiom, index) in idioms" :key="idiom.pinyin">    <view class="item"  @click="viewIdiom(idiom.pinyin)">      <view class="title" v-html="idiom.name"></view>      <view class="rightText" >{{idiom.pinyin}}</view>    </view>  </uni-list>

      search(e) {        //无检索词时不处理        if(this.keys==''){          return ;        }        this.idioms = this.getIdioms(this.keys)        if(this.idioms&&this.keys.length>0){          this.keys.split('').forEach(key => {//按照字分词，实际项目中自行设置规则            this.idioms.forEach(idiom => {                idiom.name = this.highlight(idiom.name,key);            })          })        }      }

      //分词匹配并设置高亮样式      highlight(name,key) {        const regExp = new RegExp(key, 'gi');        return name.replace(regExp, match => {            return `<span style="color: red;">${match}</span>`; //可以定义高亮的样式        });      }

      //查看详情      viewIdiom(pinyin){        uni.navigateTo({          url:'/pages/index/view?pinyin='+pinyin        })      }

view.vue：详情页

<template>  <view class="content">    <image class="logo" src="/static/logo.png"></image>    <view class="text-area">      {{pinyin}}    </view>  </view></template><script>  export default {    data() {      return {        pinyin: 'Hello'      }    },    onLoad(e) {      this.pinyin =e.pinyin    },    methods: {    }  }</script>