小程序搜索结果关键字标红（支持拼音）

迈不过友情╰ 2023-02-11 13:29 6阅读 0赞

**试用场景：**根据搜索关键字，请求服务端接口后返回的搜索结果，然后关键词进行标红处理

### 效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70][]               ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70 1][]

**图一 (基本的根据搜索关键词标红)， 图二 (可根据拼音如“a”，查找结果中所有出现的文字中带拼音“a”的，然后标红处理)  **** **

接下来贴上部分关键代码：

<block wx:for="{
       {item.news_xqadd}}" wx:for-item="item2" wx:key="index">
    	<text wx:if="{
       {item2.key}}" style="color:red;">{
       {item2.str}}</text>
    	<text wx:else>{
       {item2.str}}</text>
    </block>
    
    <view wx:if='{
       {xqList.length==0&&isSearch}}'>未找到该小区</view>
    
    ......

/* js */
    const jwNet = require('../../../utils/jw/jwNet.js');
    const py = require('../../../utils/pinyin.js');
    
    Page({
        data: {
            value: '',
            xqList: [],
            isSearch: false,
        },
    
        // 输入内容时触发
        onChange(e) {
            let that = this;
            if (e.detail != '') {
                // 这是请求后端接口的
                jwNet.request('Applet', 'getVillageName', { keyword: e.detail }, 'GET', function (res) {
                    if (res.code == 0 && res.data.length > 0) {
    
                        // 调用 关键代码是这for循环里面的
                        for (let i in res.data) {
                            // 搜索关键字标红 - 小区
                            let xq_result = py.findSplitStr(res.data[i].xq, e.detail);
                            res.data[i].news_xq = xq_result ? xq_result : [];
    
                            // 搜索关键字标红 - 小区具体地址
                            let xqadd_result = py.findSplitStr(res.data[i].xqadd, e.detail);
                            res.data[i].news_xqadd = xqadd_result ? xqadd_result : [];
                        }
                        that.setData({ xqList: res.data });
    
                    } else {
                        that.setData({ xqList: [], isSearch: true });
                    }
                });
            } else {
                that.setData({ xqList: [], isSearch: false });
            }
        },
    
        ......
    
    })

**pinyin.js（关键代码封装在这文件里）**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200523223843595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020052322400923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz,size_16,color_FFFFFF,t_70