vue+element UI
The official documentation for element UI with input:/#/zh-CN/component/input
It is recommended to read the official documents first. Here is an appropriate supplement to the official documents.
Quote el-autocomplete
1. Quote where needed
<el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch" placeholder="Please enter content" @select="handleSubmit" ></el-autocomplete>
v-model="inputValue": binds the value to inputValue, that is, the automatically inputted recommended value can be obtained through inputValue.
:fetch-suggestions="querySearch" : Returns the input suggestion method, that is, the input box gets the focus. This method will be automatically called to get the data, which is the input recommended data.
@select="handleSelect" : Call this method when the suggested item is selected.
2 、
<script>
export default {
name: "searchBar",
//allInfos is the value transmitted from the parent component. If allInfos is not transmitted from the parent component, you don't need to write this way props: ["allInfos"],
data() {
return {
inputValue: "",
};
},
methods: {
handleSubmit() {
//According to your own situation //This method is triggered when submitting },
// Method called when the input box gets focus querySearch(queryString, cb) {
//How does allInfos come from, is it transmitted from the parent component, is it obtained by calling the API interface from its own component or is it otherwise //My allInfos is passed from the parent component, and here I also give an example of the component passing values from the parent component let results = ;
results = queryString
? ((queryString))
: results;
//cb is a callback function, which returns the filtered result data to the input list below the input box cb(results);
},
//This method imitates the official document. If there is no special requirement, the method will not be changed much. //This is triggered when inputting data, filtering out the recommended input that matches the input data. //I am using the call to the match method here, which is a fuzzy match; the official call to indexOf, which is an exact match, which depends on your own situation to choose createFilter(queryString) {
return (item) => {
return ().match(());
};
},
},
};
</script>Two ways to trigger input with two suggestions
1. Triggered when the input box gets focus
This is the default
2. After entering the value, match trigger
Add:trigger-on-focus="false"
<el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="Please enter content" @select="handleSubmit" ></el-autocomplete>
Convert to input the data structure of the recommended callback
Everyone has also seen that the data result of the callback in the document is an array, and each item in the array is an object. There must be a value attribute in the object, which are necessary. If the data structure does not grow like this, the recommended data to be input cannot be rendered.
[
{ "value": "xxx(Enter the recommended value，Required)", "address": "Depend on your own situation" },
]So the question is, what should I do if the data I took out is not like this structure? Take my situation as an example.
The data I got is like this. Although it is also an array, the object properties in the array are different.
=
[
{ "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.
= ((terminal) => {
return {
value: modelName,
name: modelId,
};
});You can log and you will find that the structure of allInfos has become the desired sub-sub.
Adding the car-return trigger event
Add @ method to the component
<el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="Please enter content" @select="handleSubmit" @="handleSubmit" ></el-autocomplete>
Solve the bug that suggested that the input box does not disappear after entering
If a carriage return event is added, then after the input data is entered, the input suggestion box does not disappear automatically. How to solve it?
Adding method to the component: @input (triggers the changeStyle method when the input value changes)
@keyup (the event triggered by the key release button, that is, the changeStyle method is triggered when the carriage is entered)
The "block" passed in is to expand the input box suggestions, '.el-autocomplete-suggestion' is the class name of the input box
<el-autocomplete
class="inline-input"
v-model="inputValue"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
placeholder="Please enter content"
@select="handleSubmit"
@="handleSubmit"
@input="changeStyle('block', '.el-autocomplete-suggestion')"
@keyup="changeStyle('block', '.el-autocomplete-suggestion')"
></el-autocomplete>
//Change the state of the recommended input box according to the transmitted state (Expand | Hide) changeStyle(status, className) {
let dom = (className);
dom[0]. = status;
},Call the changeStyle method when handleSubmit, and the passed state is none (indicating that the input suggestion box is hidden)
handleSubmit() {
("none", ".el-autocomplete-suggestion");
},This is the article about the use of element with input suggestions for el-autocomplete. For more related element el-autocomplete, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!