SoFunction
Updated on 2025-03-01

Example of method to implement local fuzzy search function in front-end JavaScript

1. Project prospects

As vue and react become more and more widely in actual development, the front-end process more and more data. The main purpose of this article is to process the data returned by the server and perform fuzzy queries according to the conditions, thereby reducing the number of requests sent to the server and improving performance and user experience. The following is a simple DEMO to implement the function of fuzzy query:

The data used for testing are as follows:

var data = [{
            "title": "How long is your broken heart repair period?",
            "title_image": "/dtmimg/b7c9ec393414982682e5a477eb995b55",
            "desc": "Test the food and dining test how long your love break is",
            "id": "2",
            "num": 951357,
            "flag": "01"
    },
    {
            "title": "How high is your coquettish index?",
            "title_image": "/dtmimg/60d8ed86d1f72357c194506270c72ac1",
            "desc": "A woman who can act coquettishly in food and catering is the best. How good are you to act coquettishly? What is the charm of your acting coquettishly? Come and test it!",
            "id": "3",
            "num": 963258,
            "flag": "01"
    },
    {
            "title": "How do you get married in the future?",
            "title_image": "/dtmimg/538632e75159ce8e586778d289c66a11",
            "desc": "I believe many people are full of expectations for their future marriage. Do you want to know your future marriage?",
            "id": "4",
            "num": 879564,
            "flag": "01"
    },
]

2. Involving knowledge points

Usage of ()

Methods are used to copy all enumerable properties of the source object to the target object. It requires at least two objects as parameters, the first parameter is the target object, and the subsequent parameters are all source objects.

// Process original arraylet arrnew = ((item, index) => {
    return ({}, {
            'desc': ,
    })
})

filter() method

The filter() method is used to filter array elements. This method creates a new array containing all elements of the test implemented by the provided function. filter() does not detect empty arrays, nor does it change the original array.

indexOf() fuzzy query

The indexOf() method returns the first occurrence of a specified string value in the string. If the string value to be retrieved does not appear, the method returns -1. In conjunction with the filter() method, it can detect whether the input value is included in the array and return it.

var newData = (item => {
    if ((value) > -1) { //If ("") return value is 0 in indexOf method            return item
    }
    return newData
})

The complete DEMO code is as follows:

<div class="wrap">
        <input type="text" >
        <ul >
        </ul>
</div>
function creat() {
        var value = ;
        var html = "";
        let arrnew = ((item, index) => {
                return ({}, {
                        'desc': ,
                })
        })

        var newData = (item => {
                if ((value) > -1) { //If ("") return value is 0 in indexOf method                        return item
                }
                return newData
        })


        if ( > 0) {
                for (var i = 0; i < ; i++) {
                        html += `<li>${newData[i].desc}</li>`
                }
        } else {
                html += `<li>No data yet</li>`
        }
         = html;
}
creat()
 = function(e) {
        creat()
}

Summarize

This is the article about JavaScript implementing local fuzzy search function. For more related JS local fuzzy search content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!