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


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 相关文章推荐
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
React如何实现浏览器打印部分内容详析
May 19 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
php中的ini配置原理详解
2014/10/14 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
php验证码生成器
2017/05/24 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
javascript编码的几个方法详细介绍
2013/01/06 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
Python编程之多态用法实例详解
2015/05/19 Python
Python重新加载模块的实现方法
2018/10/16 Python
浅析python参数的知识点
2018/12/10 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
jupyter 导入csv文件方式
2020/04/21 Python
医院办公室主任职责
2013/12/29 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
四年级语文教学反思
2014/02/05 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
小学生读书感言
2014/02/12 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
化妆品促销方案
2014/02/24 职场文书
食品安全标语
2014/06/07 职场文书
应届生自荐书
2014/06/23 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
团代会开幕词
2015/01/28 职场文书
大学生暑期实践报告
2015/07/13 职场文书