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>