Official document with input suggestions for element UI: https://element.eleme.cn/#/zh-CN/component/input

It is recommended to read the official documents first. Here is an appropriate supplement to the official documents

Reference El autocomplete

1. Reference where needed

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      placeholder="Please enter the content"
      @select="handleSubmit"
    ></el-autocomplete>

v-model="inputValue": bind the value with inputValue, that is, automatically input the recommended value, which can be obtained through inputValue.

:fetch-suggestions="querySearch":
Returns the method of input suggestion, that is, input box 1 to get focus. The method will be automatically called to get the data, which is the data of input suggestions.

@select="handleSelect": this method is called when a suggestion item is selected.

2 ,

<script>
export default {
  name: "searchBar",
  //allInfos is the value passed from the parent component. If allInfos is not passed from the parent component, you don't need to write it this way
  props: ["allInfos"],
  data() {
    return {
      inputValue: "",
    };
  },
 
  methods: {
    handleSubmit() {
     //According to their own situation
     //This method is triggered when submitting
    },
    //The method called when the input box gets focus
    querySearch(queryString, cb) {
    //How does allInfos come from? Is it passed from the parent component, or is it obtained by calling the api interface of its own component, or others
    //allInfos here is passed from the parent component. Here, for example, child components pass values from the parent component
      let results = this.allInfos;
      results = queryString
        ? results.filter(this.createFilter(queryString))
        : results;
    //cb is a callback function that returns the filtered result data to the input list under the input box
      cb(results);
    },
    //This method imitates the official document. If there is no special demand, this method will not change much
    //This is triggered when data is entered to filter out suggested inputs that match the input data.
    //What I use here is to call the match method, which is fuzzy matching; The official call is indexOf, which is an exact match. It depends on your own situation
    createFilter(queryString) {
      return (item) => {
        return item.value.toUpperCase().match(queryString.toUpperCase());
      };
    },
  },
};
</script>

Two ways to trigger with input suggestions

1. Triggered when the input box gets focus
   This is the default
2. Match trigger after entering value
   Add trigger on focus = "false" to the component

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="Please enter the content"
      @select="handleSubmit"
    ></el-autocomplete>

Convert to the data structure of the input suggestion callback

You can also see that in the document, the data result of the callback is an array. Each item of the array is an object. There must be a value attribute in the object. These are necessary. If the data structure is not so long, the data to be input can not be rendered.

[
          { "value": "xxx(The value you see when entering the suggestion is required)", "address": "Look at yourself" },
]

So the question is, what if the data is not structured like this? Take my case as an example.

The data I got is like this. Although it is also an array, the object properties in the array are different.

this.modelInfos=
[
          { "modelId": "1", "modelName": "a1"，type:"c" },
          { "modelId": "2", "modelName": "a2"，type:"c" },
          { "modelId": "3", "modelName": "a3"，type:"c" },
          { "modelId": "4", "modelName": "a4"，type:"c" },
]

Use map to return the desired data structure.

 this.allInfos= this.modelInfos.map((terminal) => {
        return {
          value: modelName,
          name: modelId,
        };
      });

You can print the log, and you will find that the structure of allInfos has become the desired child.

Add carriage return trigger event

Add @ Keyup enter. Native method

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="Please enter the content"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
    ></el-autocomplete>

Solve the bug that the suggestion input box does not disappear after entering

If the enter event is added, the input suggestion box does not disappear automatically after entering the data. How to solve it?

Add the following method to the component:
@Input (trigger the changeStyle method when the input value changes)

@keyup (the event triggered when the key is released, that is, the changeStyle method is triggered when entering)

The "block" passed in is to make the input box suggest expanding, ' el-autocomplete-suggestion 'is the class name of the input suggestion box

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="Please enter the content"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
      @input="changeStyle('block', '.el-autocomplete-suggestion')"
      @keyup="changeStyle('block', '.el-autocomplete-suggestion')"
    ></el-autocomplete>

//Change the status of the suggestion input box according to the transmitted status (expand | hide)
changeStyle(status, className) {
  let dom = document.querySelectorAll(className);
  dom[0].style.display = status;
},

When handleSubmit, the changeStyle method is called, and the incoming status is none (indicating that the input suggestion box is hidden)

handleSubmit() {
      this.changeStyle("none", ".el-autocomplete-suggestion");    
    },