Home Web Front-end JS Tutorial How to achieve result highlighting during global search

How to achieve result highlighting during global search

May 02, 2018 pm 04:50 PM
how result Highlight

This time I will show you how to achieve result highlighting during global search. What are the precautions for achieving result highlighting during global search? Here is a practical case, let’s take a look.

Requirements

When I was working on a WeChat applet recently, I needed to achieve global matching and highlight effects when entering content in the search box. The current idea is , recursively return the data in the background, and replace the value of the object with the required dom node, and achieve the highlighting effect through rich-text.

Code

wxml:

1

2

3

4

5

6

7

8

9

10

11

<view class=&#39;homePage&#39;>

  <input bindinput="bindKeyInput"></input>

  <view wx:for="{{newJson}}" wx:for-item=&#39;item&#39; 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=&#39;sitem&#39; wx:key>

      <rich-text nodes="{{sitem}}"></rich-text>  

    </view>

  </view>

</view>

Copy after login

js:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

//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=&#39;color:red&#39;>" + 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=&#39;color:red&#39;>" + 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

    })

  }

})

Copy after login

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Recommended reading:

angular4 Multiple components communicate with each other

Detailed explanation of the steps for Vue to reference external style files

The above is the detailed content of How to achieve result highlighting during global search. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1266
29
C# Tutorial
1239
24
Is there a future for employment in clinical pharmacy at Harbin Medical University? (What are the employment prospects for clinical pharmacy at Harbin Medical University?) Is there a future for employment in clinical pharmacy at Harbin Medical University? (What are the employment prospects for clinical pharmacy at Harbin Medical University?) Jan 02, 2024 pm 08:54 PM

What are the employment prospects of clinical pharmacy at Harbin Medical University? Although the national employment situation is not optimistic, pharmaceutical graduates still have good employment prospects. Overall, the supply of pharmaceutical graduates is less than the demand. Pharmaceutical companies and pharmaceutical factories are the main channels for absorbing such graduates. The demand for talents in the pharmaceutical industry is also growing steadily. According to reports, in recent years, the supply-demand ratio for graduate students in majors such as pharmaceutical preparations and natural medicinal chemistry has even reached 1:10. Employment direction of clinical pharmacy major: After graduation, students majoring in clinical medicine can engage in medical treatment, prevention, medical research, etc. in medical and health units, medical research and other departments. Employment positions: Medical representative, pharmaceutical sales representative, sales representative, sales manager, regional sales manager, investment manager, product manager, product specialist, nurse

How to clean temp folder How to clean temp folder Feb 22, 2024 am 09:15 AM

How to clean the temp folder As we use the computer, temporary files (temp files) will gradually accumulate. These temporary files are generated when we use the computer, such as cache files when browsing the web, temporary files during software installation, etc. Failure to clean the temp folder for a long time may occupy a large amount of disk space and affect the speed of the computer. Therefore, cleaning the temp folder regularly is a necessary step to maintain computer performance. Below, we will introduce some simple ways to clean the temp folder. Method 1: Manually clean t

How to download win10 image quickly How to download win10 image quickly Jan 07, 2024 am 11:33 AM

Recently, some friends reported how to download win10 image files. Because there are so many image files on the market, what should I do if I want to find a regular file to download? Today, the editor has brought you the link to download the image and the detailed solution steps. Let’s take a look at them together. win10 image quick download and installation tutorial download link >>> System Home Ghostwin101909 image 64-bit version v2019.11<<<>>>Win10 image 64-bit v2019.07<<<>>>Win10 image 32-bit v2019.07<< <1. Search through the Internet

How to use highlight effect in jQuery? How to use highlight effect in jQuery? Feb 27, 2024 pm 03:33 PM

How to use highlight effect in jQuery? In web development, the highlight effect is a common interactive design that can highlight specific elements and attract the user's attention. In jQuery, the highlighting effect can be achieved through simple code, adding some dynamic and visual effects to the web page. This article will introduce how to implement highlighting effects in jQuery and provide specific code examples. First, make sure you include the jQuery library in your web page. You can add in the tag

How to reset Win10 system How to reset Win10 system Jun 29, 2023 pm 03:14 PM

How to reset Win10 system? Nowadays, many friends like to use computers with Win10 system. However, they will inevitably encounter some unsolvable problems when using computers. At this time, you can try to reset the system. So how should you do it? Let’s follow the editor to watch the tutorial on resetting the Win10 system. Users in need should not miss it. Tutorial on resetting the Win10 system 1. Click Windows and select Settings. 2. Click Update and Security. 3. Select Restore. 4. Click Start on the right to reset this computer. The above is the entire content of [How to reset Win10 system - Tutorial on resetting Win10 system]. More exciting tutorials are available on this site!

How to check win11 computer configuration How to check win11 computer configuration Jun 29, 2023 pm 12:15 PM

How to check win11 computer configuration? The win11 system is a very practical computer operating system version. This version provides users with rich functions, allowing users to have a better computer operating experience. So many friends who use computers are curious about their computers. Specific configuration, how to perform this operation in win11 system? Many friends don’t know how to operate in detail. The editor has compiled a tutorial on how to view the win11 computer configuration below. If you are interested, follow the editor and read on! Win11 computer configuration view tutorial 1. Click the windows icon on the taskbar below or press the "windows key" on the keyboard to open the start menu. 2. Find "Settings" or "sett" in the start menu.

Solve the problem of environment detection when reinstalling the system Solve the problem of environment detection when reinstalling the system Jan 08, 2024 pm 03:33 PM

How to solve the problem that the environment test fails when reinstalling the system and needs to be rewritten. The reason is: the mobile phone is poisoned. You can install anti-virus software such as Mobile Manager for anti-virus. 2. Many junk files are stored inside the mobile phone, causing the running memory of the mobile phone to be occupied. Just clear the phone cache to solve this problem. 3. The phone memory is occupied too much by saved software and files. It is no problem to delete unnecessary files and software frequently. As long as your hardware configuration meets the installation requirements, you can use the new one directly. Reinstall the system from the system disk! You can use a USB flash drive or hard disk to install, which is very fast. But the key is to use a system disk with good compatibility (supports installation in IDE, ACHI, and RAID modes), and it can be automatically and permanently activated, which has been verified. so

When will I know the result of the waitlist ticket purchase? When will I know the result of the waitlist ticket purchase? Feb 20, 2024 pm 11:48 PM

When will I know the result of waiting for ticket purchase? In recent years, as people's demand for travel continues to grow, the difficulty of purchasing tickets has become increasingly prominent. In order to solve the problem of ticket purchasing, the railway department has introduced a wait-list ticket purchase mechanism and has set up a wait-list ticket purchase option in the ticketing system of some popular trains. However, for users who are on the waiting list to purchase tickets, the most concerning issue is when they will get the ticket purchase results. Waiting for ticket purchase means that when all the tickets for a train are sold out, users can choose to wait for ticket purchase, that is, put their ticket purchase request into the waiting queue. When there is

See all articles