This is how I used to filter my searches

data.filter(item => item.indexOf(keywords) >= 0)

This does satisfy the need for keyword search, but given that the front end is the person who presents the screen directly to the user, we always need to put ourselves in the user’s shoes. After more projects, actually found that this is not friendly in user experience, let’s look at the following example:

Edit styles in the Chrome browser

VS Code Edit Styles

In Chrome, non-continuous character matching is not possible, causing some loss of experience, while in VS Code, keyword matching is freely typed intermittently. There is no doubt that our editorial experience in vs code will be more smooth, because in many scenarios, we cannot remember a continuous keywords, keyword, but in the intermittent of at this time we use this keyword search is a good way to improve the user experience, but also does not affect the continuous keyword search.

In what scenario can a non-continuous keyword search be used

This kind of demand is generally for searching local data, and when the demand scenario does not specify that continuous keyword search is required, we can use non-continuous keyword search to achieve it. The following scenarios are listed in detail:

  1. Tree menu item search: similar to the management of the background page menu, multi-node search
  2. Checkbox option search: More options can be searched in the checkbox
  3. Path list search: such as VS Code’s file search
  4. Local cache search: WeChat cache chat record keyword search

So how do we do that

Thanks to the universal npmjs.com, after all kinds of search, I found a good JS function library above to achieve a non-continuous keyword search, let’s first look at a simple Demo, and then analyze its implementation principle.

The js library is here ->string-discontinuous-match



In this Demo, 1000 random strings with the length of 200 are searched for non-continuous keywords. It only takes 1-2ms to complete a single search, and the performance is considerable.

Next post the implementation code, through VUE implementation

<div class=" app"> <div class="search-wrap"> <label>🔍</ div label> <input class="search-box" v-model="val" @input="inputHandler"  /> </div> <div class="info"> <span>Data totals: {{ numbers }}</span> <span v-if="performance">Performance: {{ performance }}</span> </div> <div class="result"> <span class="item" v-for="item in strings" :key="item" v-html="item"></span> </div> </div>
Data () {return {val: ", strings: strings, string: strings, string: strings, string: string, string: string, string: string, string: string, string: string, string: string "'}; }

The following is the input event implementation

<input @input="inputHandler" /> import { discontinuousMatch, replaceMatchedString } from 'string-discontinuous-match'; Function inPutHandler () {if (this.val) {let s = performance.now(); let ret = discontinuousMatch(strings, this.val); let e = performance.now(); String = replacematchedString (item) {return replacematchedString (item); return return replacematchedString (item); chars => `<span class="keyword">${chars}</span>`); }); this.performance = (e - s) + 'ms'; } else { this.data = strings; this.strings = strings; this.performance = ''; } this.numbers = this.strings.length; }

The format of search results is:

[{value: 'XXX ', // Index of the searched string: [0, 2] = 0; [0, 2] = 0; [0, 2] = 0; [0, 2] = 0; [[0, 2], [10, 12], 14, 17], lastIndex: 17 last a matching index} / /, / /...

So you can use the position information to highlight the corresponding character, but you don’t actually have to handle it yourself. String-disContinuous match provides a helper function to handle it. For example, in InputHandler, You can see that we’re looping through the match result into the replacematchedString function, and what it does is it extracts the matched string, and it triggers callbacks based on the position array, in the position: [[0, 2], [10, 12], 14, 17] extract subscript 0 to 2 strings and trigger a callback, in which you can return the converted string, such as wrapping it with tag, then extract 10 to 12 strings and trigger a callback, and so on for a total of 4 callbacks. Finally, the converted string is returned to us, so that we can easily match the keyword highlighting state.

Through such a single operation, it has realized the function of non-continuous keyword search.

How is the performance??

We should all have such a question, the small amount of data is OK, but for the large amount of data matching, will it be slow? After all, a discontinuous match!!

To this question, the JS library provides the following answer:

Searching for 50 random key strings in 10000 random 5000 bit strings, ignoring case, takes 101ms, good performance is good.

At the end

For a front end, we should still put the user experience in an important position, and this search is one of the optimization points, just need a simple step, we can solve this problem, do not know is reading the article you think it is worth a try? If you are interested in this JS library can study the source code, in fact, it is also very simple. That’s all for today. If you have any questions, you can issue it to the author. Satisfied with my tutorial, please don’t be stingy with your free likes!!