Element-ui's built-in two remote search (fuzzy query) usage explanation

<template>
 <div id="app">
  <!-- For remote search, use filterable and remote -->
  <el-select
   v-model="value"
   filterable
   remote
   placeholder="Please enter keywords"
   :remote-method="remoteMethod"
   :loading="loading"
  >
   <!-- Hook function encapsulated by remote-method. When the user enters content in the input box, the execution of this function will be triggered.
   The value corresponding to the input box is passed as a parameter to the callback function. Loading means the waiting time during remote search, that is: loading -->
   <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
   >
   </el-option>
  </el-select>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   options: [],
   value: [],
   loading: false,
  };
 },
 methods: {
  // When the user enters content to start remote search fuzzy query, the remoteMethod method remoteMethod(query) {
   // If the user enters content, send a request to get data and remotely search for fuzzy query if (query !== "") {
    this.loading = true; // Start getting data // Here we simulate sending a request, and res will be regarded as the data returned by the request.
    let res = [
     {
      label: "Sun Wukong",
      value: 500,
     },
     {
      label: "Sun Shangxiang",
      value: 18,
     },
     {
      label: "Sha Monk",
      value: 1000,
     },
     {
      label: "Sha Junior Brother",
      value: 999,
     },
    ];
    this.loading = false // Get the data // Then filter all the data obtained first, filter the related data into a new array and give it to options using this.options = res.filter((item)=>{

     // indexOf equal to 0 means that only the first word is matched, such as: searching for Wang Wang Xiaohu's data will be filtered out, but Xiaohu Wang's data will not be filtered out. Because indexOf equals 0, it means it starts with something // return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0

     // indexOf greater than -1 means that as long as the word appears, it will be filtered out, such as: searching for Wang Wang Xiaohu, Xiao Hu Wang, and Xiao Wang Hu will all be filtered out. Because indexOf cannot find it, it will return -1.
     // Greater than -1 means it's OK as long as it exists, no matter if it's at the beginning, middle, or end return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
    })
   } else {
    this.options = [];
   }
  },
 },
};
</script>

<template>
 <div id="app">
  <div>
   <el-autocomplete
    v-model="state2"
    :fetch-suggestions="querySearch"
    placeholder="Please enter 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>

<script>
export default {
 name: "app",
 data() {
  return {
   state2: "",
   fruit:
    {
     value: "Banana",
     price: "8.58",
    },
    {
     value: "Cherry",
     price: "39.99",
    },
    {
     value: "Walnut",
     price: "26.36",
    },
    {
     value: "mango",
     price: "15.78",
    },
   ],
  };
 },
 methods: {
  // Step 2 // When queryString is not empty, it means the user has entered something. We compare the user's input in the database. If there is any fuzzy association, we directly retrieve it // and return it 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 choose.
  querySearch(queryString, cb) {
   if (queryString != "") {
    // Do fuzzy search after entering content setTimeout(() => {
     let callBackArr = []; // Prepare an empty array, which is the array that is finally returned to the input box // This res is the data obtained from the backend after sending the request const res = [
      {
       value: "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) => {
      // Traverse the database and compare the word entered by the user with each item in the database // if (item.value.indexOf(queryString) == 0) { // equal to 0 and starts with something if (item.value.indexOf(queryString) > -1) { // greater than -1, as long as it is included, the position does not matter // If there is related data callBackArr.push(item); // store it in callBackArr and prepare to return and present }
     });
     // After this wave of query operations, if the array is still empty, it means that no related data has been found, and it will be directly returned to the user that there is no data if (callBackArr.length == 0) {
      cb([{ value: "No data", price: "No data" }]);
     }
     // If data is found after this wave of query operations, the array callBackArr containing the related data is presented to the user else {
      cb(callBackArr);
     }
    }, 1000);
   }
  },
  // Click on whoever is put in handleSelect(item) {
   this.fruit = []
   this.fruit.push(item)
  },
 },
};
</script>