This article documents the use of El-AutoComplete and two common problems

Demand analysis

Suppose we have a requirement like this:

  1. After the user enters the content in the input box, the associated suggestion option information is displayed for the user to select. For example, the user input the word “Wang”, so to present all the information about “Wang”, what “Lao Wang”, “Wang Lao Ji” are out, the user point associated suggestions optional, so as to facilitate the user to enter quickly.
  2. Initially, when the user’s input field is in focus and the content in the input field is missing, the user’s previous search history is presented.
  3. When the user enters some text but deletes the backspace one by one, that is, when the user deletes the text in the input box, that is, when the content of the input box is empty, the history is displayed again

Using the el-AutoComplete component at this point can quickly solve our problem

El-autocomplete property introduction

The fetch – Suggestions properties

The function is triggered when the input is entered, or when the user enters the box to type a word. Normally, the callback function has two parameters, respectively queryString and cb. The queryString argument represents the value that the user fills into the input box, and cb refers to a function. This is the use of higher-order functions (Currification), which is not described here. The cb function receives an array, which corresponds to the dropdown box associated with the input box. But there are fixed format requirements. Because in the underlying code of el-AutoComplete, there is a V-for loop instruction, and the array of the loop is the array passed by cb function, so the content of the array in CB function is the content of the input suggestion drop-down box

/ / HTML
:fetch-suggestions="querySearch"

/ / js parts
querySearch(queryString, cb) {
    cb([
        {value:"Wang"},
        {value:"Wang Lao Ji"} // Each item in the array is an object. The object must have a value attribute, otherwise it cannot be displayed. The reason is that the value field is defined in the source code])}// If the data structure provided by the back end is not this structure, you can use the filter or map method of the array to assemble the data structure format
Copy the code

The illustration is as follows:

Fetch -suggestions can also pass multiple pieces of data, but only in the form of closures, as we’ll see in more examples later.

Fetch -suggestions is used for associated data search. Users input the word “Wang” to obtain the option values of “Lao Wang” and “Wang Lao Ji”. When the user selects Wang Lao Ji, if it is a search function, the specific information of Wang Lao Ji needs to be searched. This is where the select attribute of el-AutoComplete is used

The select attribute

Select is also bound to a function method. When we click on the select input box to associate an option with the dropdown box, we get the value of the dropdown item. This value can be passed to the back end to send a request to the back end for specific information about a selected piece of data.

/ / HTML
@select="handleSelect"

/ / js parts
handleSelect(item) { // Parameter - A selected item
  console.log("Take the data as a parameter and send a request to the back end.",item);
}
Copy the code

The trigger – on – focus properties

This property controls whether the fetch-suggestions are triggered when el-Input gets focus. As soon as the fetch-suggestions are triggered, the request will be sent to the back end, and the input input box will be associated with the drop – down box (input suggestion list). The official definition is default :trigger-on-focus=true, which is the input box as soon as the input box gets the focus, the input suggestion list will appear. Trigger-on-focus =”true” can be used in the case of historical search data, after all, the initial situation can allow the backend to provide historical data for the user to select.

Of course, if trigger-on-focus=”false” is set, the input suggestion list will not appear when the initial focus is obtained. After the user enters the text, the user will send a request with what the user enters in the input box and ask the backend for data.

Specific use that depends on specific needs.

Let’s look at the renderings first, and then at the code

rendering

Code attached

<template>
  <div id="box">
    <el-autocomplete
      :fetch-suggestions="querySearch"
      v-model="inputValue"
      @select="handleSelect"
      :debounce="0"
      :trigger-on-focus="true"
      clearable
      @clear="blurForBug()"
    ></el-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""}; },methods: {
    // The method called when the input box gets focus
    querySearch(queryString, cb) { // queryString is what the user typed to query for, cb is the callback function (can make a request to get data)
      console.log("How to trigger", queryString, cb);
      if (queryString == "") {
        cb([{ value: "Historical Record I" }, { value: "Historical Record II" }]); // Of course, the history is returned by the back end, which should be returned by the interface
      } else {
        let apiResult = [
          {
            value: "Wang"}, {value: "Wang Lao Ji",},];// Here we emulate data asynchronously retrieved from the back-end interface
        setTimeout(() = > {
          // cb([]) if cb returns an empty array, the fuzzy search input's suggested dropdown will disappear because length is 0
          cb(apiResult);
        }, 500); }},// When the value recommended by the input box is selected
    handleSelect(item) { / / parameters
      console.log("Get the data.", item);
    },
    // After clicking clearable to clear the small icon button, continue to re-enter data in the input field. QuerySearch will fire, but cb will not fire
    // The request is sent and the data is retrieved, but the input suggestion drop box is not displayed on the page, so the solution is
    // As long as the user clicks
    blurForBug(){
      document.activeElement.blur()
    }
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 100%;
  height: 600px;
  box-sizing: border-box;
  padding: 50px;
}
</style>
Copy the code

Q&A

Click the Clearable clear button to enter the suggestion invalid

What we can see is that if we add the Clearable attribute to the el-AutoComplete component tag, then when we type in the content, and then we hit the Clearable Clear button to clear out the data in the input field, when we re-type the text, the request will be triggered, The data returned to us by the back end is also retrieved, but the data returned to us by the back end is not rendered to the page. It’s like the input doesn’t respond. The straightforward solution is that when the user clicks the Clearable clear button, the current input field loses focus, returns to the original state, and starts all over again

To proactively trigger the loss of focus, resolve the “fetch-suggestions” input suggestion failure bug, i.e. : @clear=”blurForBug()”

Passing multiple arguments (using closures)

HTML part

<el-autocomplete
  v-model="inputValue"
  @select="handleSelect"
  :debounce="0"
  :trigger-on-focus="true"
  clearable
  @clear="blurForBug()"
 :fetch-suggestions=" (queryString, cb) => { multipleFn(queryString, cb, index); }"
></el-autocomplete>
Copy the code

Js part

multipleFn(queryString, cb, index) {
    console.log(queryString, cb, index)
}
Copy the code

Note the way “fetch-suggestions” is written in the HTML section above, where closures are used so that multiple arguments can be passed. Because if a function module has multiple el-autocompletions, then we need to use v-for to loop out, and we may need to pass item and index to the back end, then we need to pass multiple parameters. In this case, we can use the closure method to solve the problem