微信小程序实现全局搜索代码高亮的示例


Posted in Javascript onMarch 30, 2018

需求

最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果。

代码

wxml:

<view class='homePage'>
  <input bindinput="bindKeyInput"></input>
  <view wx:for="{{newJson}}" wx:for-item='item' wx:key>
    <rich-text nodes="{{item.name}}"></rich-text>  
    <rich-text nodes="{{item.address}}"></rich-text>  
    <rich-text nodes="{{item.age}}"></rich-text>
    <view wx:if="{{item.aihao}}" wx:for="{{item.aihao}}" wx:for-item='sitem' wx:key>
      <rich-text nodes="{{sitem}}"></rich-text>  
    </view>
  </view>
</view>

js:

//index.js
const app = getApp()

Page({
  data: {
    json: [{ name: 'eiolewkfp', age: 'awdqwwdk', address: 'aueifwhefwfheffoewjowef',aihao:['sdsd','sdfsd','sdsf']}, { name: '98797', age: '6544656', address: '65494364' }], // 可以是任何类型的数据
    newJson: '',
    tempText:''
  },
  onLoad: function (options) {
    this.setData({
      newJson:this.data.json
    })
  },
  digui: function (newJson,obj,key) { // 递归方法,来遍历最内层的字符串并通过正则来替换
    var that = this;
    var reg = new RegExp(that.data.tempText,'g');
    if (newJson.constructor == Array) { 
      newJson.forEach(function (item,index) {
        if (item.constructor == String){
          obj[key].splice(index, 1, item.replace(reg, "<span style='color:red'>" + that.data.tempText + "</span>"))
        }else{
          that.digui(item, newJson);
        }
      });
    } else if (newJson.constructor == Object) {
      var json = {};
      for (var key in newJson) {
        json[key] = newJson;
        that.digui(newJson[key],newJson,key);
      }
    } else if (newJson.constructor == String) { // 这里做全局替换
      if(key){
        obj[key] = newJson.replace(reg, "<span style='color:red'>" + that.data.tempText + "</span>")
      }
    }
  },
  bindKeyInput: function (e) { // 每次输入来监听键盘,处理匹配的数据
    var text = e.detail.value;
    this.setData({
      tempText:text
    })
    var newJson = JSON.parse(JSON.stringify(this.data.json)); // 实现深复制
    
    this.digui(newJson);
    this.setData({
      newJson:newJson
    })
  }

})

源代码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
javascript类型转换使用方法
Feb 08 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
js面向对象的写法
Feb 19 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
JS实现留言板功能
Jun 17 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 #Javascript
Vue实现导出excel表格功能
Mar 30 #Javascript
理解 JavaScript EventEmitter
Mar 29 #Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 #Javascript
vue的diff算法知识点总结
Mar 29 #Javascript
vue文件树组件使用详解
Mar 29 #Javascript
vue全局组件与局部组件使用方法详解
Mar 29 #Javascript
You might like
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
linux下php上传文件注意事项
2016/06/11 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
解决laravel session失效的问题
2019/10/14 PHP
js获取单选按钮的数据
2006/11/27 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
微信小程序中weui用法解析
2019/10/21 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
机关门卫制度
2014/02/01 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
放假通知格式
2015/04/14 职场文书