Problem description
There is a type of query called front-end remote search, fuzzy query. Ele. me comes with two ways to do this, one is to use el-Autocomplete in el-Input, the other is to use el-Select and el-Option. You can choose either of these options, but you need to consult with the back end about how to implement them. Who does the fuzzy query?
If the back end does
So the front end only needs to put the user in the input box of the keyword thrown to the back end, the back end according to the front end of the user to query the keyword, fuzzy query to the database, found the associated data thrown to the front end, the front end to get the data directly presented to the user to see the line. The front end is easier
If the front end does
Under normal circumstances, the back end of fuzzy query actually do more, because suppose the user input a “king” word, want to query all the data with “king” word, if there are tens of thousands of data in the database, the back end threw tens of thousands of data to the front end? Does the front end filter, filter and find? In this way, the front end will be stuck for a long time, and the data is not accurate, because when the front end filters the data returned by the back end, the data may have changed and other problems. But that doesn’t mean the front end can’t work. This article introduces two ways of ele. me, and I personally prefer the second way. Without further ado, code…
Methods a
Method one effect drawing
Input the word “sun” will appear the associated data, which is the meaning of fuzzy query
HTML part
<template>
<div id="app">
<! -- Remote search using filterable and remote -->
<el-select
v-model="value"
filterable
remote
placeholder="Please enter keywords"
:remote-method="remoteMethod"
:loading="loading"
>
<! -- remote-method Encapsulates the hook function. When a user enters content in an input field, the function is triggered to execute, and the corresponding value of the input field is fed to the callback function as an argument.
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
Copy the codeJs part
<script>
export default {
name: "app".data() {
return {
options: [].value: [].loading: false}; },methods: {
// The remoteMethod method is triggered when the user enters something to start a remote search fuzzy query
remoteMethod(query) {
// If the user input content, send a request to retrieve data, remote search fuzzy query
if(query ! = ="") {
this.loading = true; // Start to get data
// This is a request.
let res = [
{
label: "Sun Wukong".value: 500}, {label: "Sun Shangxiang".value: 18}, {label: "Sand Monk".value: 1000}, {label: "Sand teacher brother".value: 999,},];this.loading = false // Get the data
// Then filter all the obtained data into a new array and give it to options
this.options = res.filter((item) = >{
// If indexOf equals 0, data will be filtered if the first word matches, such as search king tiger data, but tiger tiger data will not be filtered. Because indexOf equals zero means what does it start with
// return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0
// indexOf greater than -1 will be filtered if the word appears, e.g., search for king tiger, tiger tiger, tiger tiger. -1 is returned because indexOf cannot be found,
// If it is greater than -1, it does not matter whether it is at the beginning, middle, or end
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1})}else {
this.options = []; ,}}}}; </script>Copy the codeTo be honest, I personally prefer method two. Somebody, get in the code
Way 2
Method two effect drawing
<template>
<div id="app">
<div>
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="Please enter the content"
:trigger-on-focus="false"
@select="handleSelect"
size="small"
></el-autocomplete>
</div>
<div>
<ul>
<li v-for="(item, index) in fruit" :key="index">{{ item.value }}</li>
</ul>
</div>
</div>
</template>
Copy the codeJs part
<script>
export default {
name: "app".data() {
return {
state2: "".fruit: [{value: "Banana".price: "8.58"}, {value: "Cherry".price: "39.99"}, {value: "Nuts".price: "26.36"}, {value: "Mango".price: "15.78",}]}; },methods: {
/ / the second step
// When the queryString is not empty, it indicates the user's input. We compare the user's input in the database, and if there is any fuzzy correlation, we directly fetch it
// And returns to the input box with search suggestions. The input box presents the returned data in the form of a drop-down box for the user to select.
querySearch(queryString, cb) {
if(queryString ! ="") {
// Do fuzzy query after input
setTimeout(() = > {
let callBackArr = []; // Prepare an empty array that is finally returned to the input box
// This res is a request to get data from the background
const res = [
{
value: The word "apple".price: "13.25"}, {value: "Apple 1".price: "13.25"}, {value: "Apple 2".price: "13.25"}, {value: "Apple 3".price: "13.25"}, {value: "Apple 4".price: "13.25"}, {value: "Apple 5".price: "13.25",},]; res.forEach((item) = > {
// Walk through the database and compare the word entered by the user with each item in the database
// if (item.value.indexof (queryString) == 0) {// If (item.value.indexof (queryString) == 0)
if (item.value.indexOf(queryString) > -1) { // if it is greater than -1, it does not matter where it is
// If there are relevant data
callBackArr.push(item); // Store it in callBackArr ready to return to render}});// If the array is still empty after such a wave of query operations, it indicates that there is no data associated with the query
if (callBackArr.length == 0) {
cb([{ value: "No data at present".price: "No data at present" }]);
}
// If the data is found after the query, the array callBackArr with the associated data is presented to the user
else{ cb(callBackArr); }},1000); }},// Click on the person, put the person in
handleSelect(item) {
this.fruit = []
this.fruit.push(item)
},
},
};
</script>
Copy the codeconclusion
Both are similar: request data, take data, process and filter data, present data. The case in this paper is that fuzzy query filtering filtering data is done by the front end, of course, it can also be done by the back end. When specific projects are done, you can discuss with the back end.