Project requirements: The user is required to enter the full name of the company in the input box. However, in order to avoid incomplete user input, an input box with input suggestions needs to be made.
element component:
el-autocomplete
class="inline-input"
v-model="state1"
placeholder="Please enter content"
:fetch-suggestions="querySearch" // fetch-suggestions is a method attribute that returns input suggestions
:trigger-on-focus="false" // false => Match input suggestions after input true => List input suggestions when activated
@select="handleSelect" // handleSelect is triggered when a suggestion item is selected by clicking on it
>
When the input box changes, the querySearch function is triggered to obtain the currently input field and then calls the createFilter function to filter the data.
The picture below shows the official writing method
The official way of writing is to put all the data in the loadAll function and then filter it through the createFilter function.
And I need to get the data from the background.
querySearch(queryString, cb) {
this.$http({
url: this.$http.adornUrl("/sys/selct/companyname"),
method: "post",
params: this.$http.adornParams({
companyName: queryString
})
}).then(({ data }) => {
for(var i=0;i
data.data[i].value = data.data[i].companyName;
}
cb(data.data);
});
}
The data field name I need to filter is not value, so now I need to traverse the array and replace the filter field with value.
Finally, cb() the data back to the autocomplete component