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

立即下载用AI写一个

发布时间：2018-10-16

19人 | 浏览：4569次 | 收藏 |

技术：微信小程序

概述

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

详细

#### 一、前期准备工作
软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
##### 1、基本需求。
- 实现搜索关键词高亮

##### 2、案例目录结构
![](/contentImages/image/20181016/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);
  },
```
#### 三、案例运行效果图
![](/contentImages/image/20181016/iUTbofezGvEi33vKWiC.gif)

#### 四、总结与备注

暂无

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子