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

2024-10-03 02:33:21

需求

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的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
    })
  }

})

源代码地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

微信小程序 for 循环详解
微信小程序 input输入框控件详解及实例（多种示例）
微信小程序开发（二）图片上传+服务端接收详解
微信小程序跳转页面的两种方法详解
微信小程序-消息提示框实例
微信小程序传值取值的几种方法总结
微信小程序页面跳转传参详解
微信小程序数组（增，删，改，查）等操作实例详解
微信小程序 wx.request(接口调用方式)详解及实例

微信小程序跳转页面的两种方法详解

微信小程序跳转页面小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i
微信小程序-消息提示框实例

做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }
微信小程序 wx.request(接口调用方式)详解及实例

微信小程序 wx.request----接口调用方式最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },
微信小程序传值取值的几种方法总结

微信小程序传值取值小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值页面传值 form表单取值 1. 列表index下标取值实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l
微信小程序开发（二）图片上传+服务端接收详解

这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了首先是小程序的wxml代码 <view class="xd-container">
微信小程序 input输入框控件详解及实例（多种示例）

微信小程序 input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下:  <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
微信小程序 for 循环详解

1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu
微信小程序页面跳转传参详解

微信小程序页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view>  <view&g
微信小程序数组（增，删，改，查）等操作实例详解

微信小程序数组(增,删,改,查)等操作最近在做一个小程序的demo.由于不向后台请求数据,所以就涉及到对本地数据的操作,也遇到了一些坑,本文就以数组的增删改查为例,给新手分享一些经验. 首先这是原始数据,json的数组. 我们尝试对改数据进行操作,同时渲染到页面. 1,数据的添加在获取到表单的数据后,自己组装一个对象,然后通过push()的方法添加一条数据,注意push的数据的index是+1的,也就是说原本数组中index依次为0,1,2,新增加的就是3,依次类推. 如果想在前面插入数据
微信小程序实现全局搜索代码高亮的示例

需求最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果. 代码 wxml: <view class='homePage'> <input bindinput="bindKeyInput"></input> <view wx:for="{{newJson}}" wx:f
微信小程序实现搜索关键词高亮的示例代码

1,前言项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接. 2,思路博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常.由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下. 3,代码逻辑模拟数据如下 list:[ '武汉大学', '华中科技
微信小程序参数传递实例代码

微信小程序参数传递实例代码 1.通过事件传递参数实例代码: <view data-id="103" bindtap="evenName"></view> Page({ evenName: function(e) { //获得点击事件传递的id console.log(e.target.dataset.id); }) 2.通过页面跳转传递参数页面1: wx.navigateTo({ url: '/pages/scan-order/sca
微信小程序日历插件代码实例

这篇文章主要介绍了微信小程序日历插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.wxml代码 <view class="timePick"> <picker mode="date" fields="month" value="{{timestamp}}" start="1999-01-01" end="2999-
微信小程序实现拨打电话功能的示例代码

1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号
微信小程序拖拽排序列表的示例代码

拖拽排序列表思路界面分为两层: 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现) 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件. 事件主要监听:longpress , touchmove , touchend 三个事件 longpress 保障长按才有效,并设定许多其他值. touchmove 滑动的时候触发判断是否需要滑动页面,因为 movable-area组件滑动事件被catch掉,无法滑动: 记录滑动经过的项
微信小程序实现手写签名的示例代码

目录 1.效果图 2.相关代码 canvas代码 js相关在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext 1.效果图 2.相关代码 canvas代码新版2d canvas <canvas id="canvas" class="ca
微信小程序实现自定义弹窗组件的示例代码

目录编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果那么,首先,我们创建一个组件新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx
微信小程序配置视图层数据绑定相关示例

目录官方文档一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3.1 数据绑定 3.1.1 普通写法 3.1.2 组件属性 3.1.3 bool类型 3.2 运算 3.2.1 三元运算 3.2.2 算数运算 3.2.3 逻辑判断 3.2.4 字符串运算 3.2.5 注意 3.3 列表渲染 3.3.1 wx:for 3.3.2 wx:for 3.3.3 w
微信小程序之页面拦截器的示例代码

场景小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav

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

您可能感兴趣的文章:

相关推荐

随机推荐