<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ></el-autocomplete>

<script>
export default {
? name: "searchBar",
? //allInfos是父組件傳來的值，如果allInfos不是父組件傳來的就不用這樣寫
? props: ["allInfos"],
? data() {
? ? return {
? ? ? inputValue: "",
? ? };
? },
?
? methods: {
? ? handleSubmit() {
? ? ?//根據(jù)自身情況
? ? ?//該方法是提交時觸發(fā)
? ? },
? ? //輸入框獲取焦點(diǎn)時調(diào)用的方法
? ? querySearch(queryString, cb) {
? ? //allInfos是怎么來，是從父組件傳過來的還是在自己組件調(diào)用api接口拿到的還是其他
? ? //我這里的allInfos是從父組件傳過來的，在這里也舉例子組件從父組件傳值
? ? ? let results = this.allInfos;
? ? ? results = queryString
? ? ? ? ? results.filter(this.createFilter(queryString))
? ? ? ? : results;
? ? //cb是回調(diào)函數(shù)，返回篩選出的結(jié)果數(shù)據(jù)到輸入框下面的輸入列表
? ? ? cb(results);
? ? },
? ? //該方法仿寫官方文檔，如果沒有特別的需求，該方法改動不大
? ? //這是當(dāng)輸入數(shù)據(jù)時觸發(fā)的，篩選出和輸入數(shù)據(jù)匹配的建議輸入。
? ? //我這里用的是調(diào)用match方法，是模糊匹配；官方調(diào)用的是indexOf，是精確匹配，看自身情況選擇
? ? createFilter(queryString) {
? ? ? return (item) => {
? ? ? ? return item.value.toUpperCase().match(queryString.toUpperCase());
? ? ? };
? ? },
? },
};
</script>

<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? :trigger-on-focus="false"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ></el-autocomplete>

[
? ? ? ? ? { "value": "xxx(在輸入建議看到的值，必需)", "address": "看自身情況" },
]

this.modelInfos=
[
? ? ? ? ? { "modelId": "1", "modelName": "a1"，type:"c" },
? ? ? ? ? { "modelId": "2", "modelName": "a2"，type:"c" },
? ? ? ? ? { "modelId": "3", "modelName": "a3"，type:"c" },
? ? ? ? ? { "modelId": "4", "modelName": "a4"，type:"c" },
]

?this.allInfos= this.modelInfos.map((terminal) => {
? ? ? ? return {
? ? ? ? ? value: modelName,
? ? ? ? ? name: modelId,
? ? ? ? };
? ? ? });

<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? :trigger-on-focus="false"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ? @keyup.enter.native="handleSubmit"
? ? ></el-autocomplete>

<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? :trigger-on-focus="false"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ? @keyup.enter.native="handleSubmit"
? ? ? @input="changeStyle('block', '.el-autocomplete-suggestion')"
? ? ? @keyup="changeStyle('block', '.el-autocomplete-suggestion')"
? ? ></el-autocomplete>
? ? //根據(jù)傳進(jìn)來的狀態(tài)改變建議輸入框的狀態(tài)（展開|隱藏）
? ? changeStyle(status, className) {
? ? ? let dom = document.querySelectorAll(className);
? ? ? dom[0].style.display = status;
? ? },

handleSubmit() {
? ? ? this.changeStyle("none", ".el-autocomplete-suggestion"); ? ?
? ? },