微信小程序--搜索关键词高亮

冷不防 2022-05-09 15:50 264阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14249.html][http_www.demodashi.com_demo_14249.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

*  实现搜索关键词高亮

##### 2、案例目录结构 #####

![6gZEeOxV2wogZYmiVwE.png][]

#### 二、程序实现具体步骤 ####

##### 1.index.wxml代码 #####

<view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{
       {userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">
          {
       {userInfo.nickName}}\n
          点击头像开始搜索
        </text>
      </view>
    </view>

##### 2.index.wxss代码 #####

/**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: red;
      text-align: center;
    }
    
    .usermotto {
      margin-top: 200px;
    }

##### 3.search.wxml代码 #####

<view>
      <view>您输入的关键词：{
       {inputs}}</view>
      <view class="input-wrap">
        <input bindinput="bindSearchInput" placeholder="点击此处开始输入...." value="极客小寨" class="search-input" auto-focus/>
        <button bindtap="bindSearchTap" class="search-button">搜索</button>
      </view>
      <view class="search-result-list">
        <block wx:for="{
       {result}}" wx:for-index="idx" wx:for-item="key_item" wx:key="">
          <view data-idx="{
       {idx}}" class="list-item">
            <block wx:for="{
       {key_item}}" wx:for-item="key_obj" wx:key="">
              <text wx:if="{
       {key_obj.key == true}}" style="color:red;">{
       {key_obj.str}}</text>
              <text wx:else>{
       {key_obj.str}}</text>
            </block>
          </view>
        </block>
      </view>
    </view>

##### 4.弹框index.js逻辑代码 #####

a.部分的功能实现

search_databse: function () {
        let hilight_word = function (key, word) {
            let idx = word.indexOf(key);
            let t = [];
            if (idx > -1) {
                if (idx == 0) {
                    t = hilight_word(key, word.substr(key.length));
                    t.unshift({key:true,str:key});
                    return t;
                }
                if (idx > 0) {
                    t = hilight_word(key, word.substr(idx));
                    t.unshift({key:false,str:word.substring(0, idx)});
                    return t;
                }
            }
            return [{key:false,str:word}];
        };
        
        let database= [
          '极客小寨小程序开发_百度百科', 
          '极客小寨微信小程序正式上线', 
          '极客小寨微信小程序有哪些?关注极客小寨微信公众号获取微信小程序最全汇总?',
          '公众号出售-公众号价格-公众号买卖-A5公众号交易平台',
          '如何运营出一个有吸引力的微信公众号? - 微信公众平台号 - 知乎'
        ];
        let searched = [];
        let inputs = this.data.inputs;
        for (let i = 0; i < database.length; i++) {
          var current_word = database[i];
          if (current_word.indexOf(inputs) > -1) {
            searched.push(hilight_word(inputs, current_word))
          }
        }
        // console.log(searched);
        this.data.result=searched;
        console.log('this data',this.data);
        this.setData(this.data);
      },

#### 三、案例运行效果图 ####

![iUTbofezGvEi33vKWiC.gif][]

#### 四、总结与备注 ####

暂无微信小程序–搜索关键词高亮

> 代码地址如下：  
> [http://www.demodashi.com/demo/14249.html][http_www.demodashi.com_demo_14249.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14249.html]: http://www.demodashi.com/demo/14249.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[6gZEeOxV2wogZYmiVwE.png]: /images/20220506/7906b37674094f278495df79066dfe5a.png
[iUTbofezGvEi33vKWiC.gif]: /images/20220506/206121415d6243d2b8f0028b375040aa.png