A simple example of how to implement fuzzy query in Vue

Preface

The so-called fuzzy query is to provide query services without the user's complete input or all input information, that is, the user can see the prompt information (actually the matched information found in the query) while typing. Baidu's search function is a good example of fuzzy query. In fact, the principle of fuzzy query is to bind the oninput event to the input box to monitor the user input, and then every time the user enters information in the input box, the event is triggered to query and then displayed in real time. The principle is very simple, but there will be some problems in implementation. We can think about it, every time a character is entered, an event will be triggered. What if we need to enter a long message, does the query have to be triggered multiple times? If ajax is triggered multiple times continuously, and if there are methods to manipulate DOM elements in our method body, our browser will inevitably enter a state of suspended animation or even crash; then is there any way we can solve this problem? The answer is: Yes

Vue implements fuzzy query

Implementing fuzzy query in Vue through watch and computed

The listening method can also be implemented by the calculation method, but it is recommended to use the calculation method because the listening method is more complicated.

First look at the following code implementation

Implemented via computed

Implementation through watch

HTML code <div id="root">
        <h2>Staff List</h2>
        <input type="text" placeholder="Please enter your name" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

script code new Vue({
        el:"#root",
        data:{
            keyWord:'',
            persons:

                {id:'001',name:'Ma Dongmei',age:18,sex:'female'},
                {id:'002',name:'Zhou Dongyu',age:19,sex:'female'},
                {id:'003',name:'Jay Chou',age:21,sex:'male'},
                {id:'004',name:'Deric Wan',age:22,sex:'male'}
        ],
        },
        computed:{
            filPersons(){
                return this.persons.filter((p)=>{//Return the filtered array return p.name.indexOf(this.keyWord) !==-1
                })//filter is a filtering function that removes cases that do not contain keywords}
        }
    })

Use the watch function to monitor whether the value of the box changes

HTML code remains unchanged Script code new Vue({
        el:"#root",
        data:{
            keyWord:'',
            persons:

                {id:'001',name:'Ma Dongmei',age:18,sex:'female'},
                {id:'002',name:'Zhou Dongyu',age:19,sex:'female'},
                {id:'003',name:'Jay Chou',age:21,sex:'male'},
                {id:'004',name:'Deric Wan',age:22,sex:'male'}
        ],
        filPersons:[//If this is not present, the value of persons cannot be changed back to its original value]
        
        },
        watch:{
            keyWord:{
                immediate:true, //Execute the following function to display all situations when the value of the box has not changed handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                    return p.name.indexOf(val) !==-1
                })
                }
            }
            
        }
    })

Summarize

This is the end of this article about Vue's implementation of fuzzy query. For more relevant Vue implementation of fuzzy query content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue implements the fuzzy query method of Input input box
Vue implements the sample code of fuzzy query of input box (application scenario of throttling function)
Vue2 filter fuzzy query method
Sample code for fuzzy query of Vue input box
Vue implements fuzzy query-Mysql database data

<<: How to use Linux paste command

>>: How to use the Linux md5sum command