SoFunction
Updated on 2025-04-06

Simple example of Vue Autocomplete autocomplete

This article describes the Vue Autocomplete automatic completion function. Share it for your reference, as follows:

Page:

In the form of closure, index represents the component

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"
 placeholder="Please enter content"
 @select="((item)=>{handleSelect(item, index)})">
</el-autocomplete>

JS:

methods: {
    querySearchAsync(queryString, callback) {
      var list = [{}];
      //The call backend interface      //let url = background interface address + queryString;      //Get object array from the background      this.$http({
        url: this.$('yjtgateway/goods'),
        method: 'get',
        params: this.$({keyword:queryString})
      }).then(({data}) => {
        for(let i of ){
           = ; //Prefer the data you want to display as a value        }
        list = ;
        callback(list);
      }).catch((error) => {
        (error)
      })
    },
    handleSelect(item,index) {
     [index] = item
    }
}

I hope this article will be helpful to everyone's programming.