input box element-ui with input suggestions stepped pit

Stepped pit Problem Description:

Question one:

To obtain the return of the back-end array and the array passed as results after incoming callback, focus on the input box when, did not show anything, there just is not a complete blank box.


Problem Solution:
this problem I thought it was passed into the callback data format is wrong. Element official line is so written:

I passed is an array of objects, no problem.
Then I read the Elemen t with a suggested query input box Demo code and access to relevant information discovery, data input only from a list of recommended
data: value field [] in! ! !

So, I returned to the back-end processing response, and the response in the field need to show the composition of {value: 'Enter recommend'} In this format, the problem is solved.

 searchAppNodeApi(searchQuery).then(response => {
          this.loadAll = response.data
          this.devEuiArr = [];
          for (let item of this.loadAll) {
            this.devEuiArr.push({"value1": item.dev_eui})
          }
        })

searchAppNodeApi () api method is the back end of my request, get the response callback function parameter request was successful. However, response which contains a lot I do not need the field, I just need them dev_eui field. Thus, each cycle in which the dev_eui response.data recombined {value: 'input suggestions'} declaration format and push into the new array devEuiArr.

Printing is as follows:

 

 

Correct results are as follows:

 

 

 

 

Question two:

After you enter a list of suggestions appears successful, the emergence of a new problem, and Demo Code Element official website does not address this situation, it is that when I get to enter the suggestion list, to switch to another input a list of suggestions, will first flashed on a recommendation list appears input, the input list is empty after the switching input also flashed on the suggestion list, even manually empty callback (data: []) data array will not help.


Problem Solution:
this problem I thought it was the need to return an array of data data manually empty callback inside, like this:

 // trigger predictions 
      querySearch (queryString, callback) {
         var Results = queryString? The this .devEuiArr.filter ( the this .createFilter (queryString)): the this .devEuiArr
         // call the callback list of recommended return data 
        callback (Results) 
        Results = ' 
      }

But it did not play a role, that is nothing to do with cache variables, then I found such a parameter in a small corner of the Element official website:

 

debounce ? 函数去抖 ? Should be is it!

debounce The default value is 300ms, we set it to 0ms.

 <el-autocomplete
          placeholder="请输入DEVEUI"
          v-model="searchDeveuiVal"
          clearable
          :fetch-suggestions="querySearch"
          size="small"
          :debounce=0
          @keyup.enter.native="searchAppNode">
 </el-autocomplete>

 

 

 



Guess you like

Origin www.cnblogs.com/yanl55555/p/12543987.html