<template><div :class="$options.name"><el-autocompletestyle="width: 100%"ref="autocomplete":popper-class="`${$options.name}-el-autocomplete`"v-model="inputSearchValue":placeholder="`輸入關鍵詞...`":value-key="`label`":fetch-suggestions="fetchSuggestions":hide-loading="false":debounce="0"@focus="focusAutocomplete"@select="selectSuggestionsItem"@clear="focusAutocomplete"clearable><template slot-scope="{ item }"><div><span class="label" v-html="item.highlightLabel || item.label" /><spanclass="value"style="margin-left: 5px;line-height: 20px;color: #999;border-radius: 88px;background-color: #eee;box-sizing: border-box;padding: 0px 10px;">{{ item.value }}</span></div></template><el-button slot="append" icon="el-icon-search" @click="clickSearchIcon"></el-button></el-autocomplete></div>
</template>
<script>
export default {name: `autocompleteInput`,components: {},data() {return {inputSearchValue: "",searchItems: [{ value: 1, label: "顯示文本1" },{ value: 2, label: "顯示文本2" },{ value: 3, label: "顯示文本3" },{ value: 4, label: "顯示文本4" },{ value: 5, label: "顯示文本5" },],};},props: ["value", "data"],watch: {data: {handler(newValue, oldValue) {if (Object.keys(newValue || {}).length) {if (newValue.ID) {this.inputSearchValue =(this.searchItems.find((v) => v.ID == newValue.ID) || {}).label ||newValue.label ||"";}}},deep: true, //深度監聽immediate: true, //立即執行},},created() {},mounted() {},beforeDestroy() {},methods: {focusAutocomplete() {this.$nextTick(() => {this.$refs.autocomplete.focus();this.$refs.autocomplete.$el.querySelector("input").select();this.$refs.autocomplete.activated = true; //這句話是重點（觸發下拉框出現）});},fetchSuggestions(queryString, callback) {if (!queryString) return callback(this.searchItems); //如果沒有輸入內容就提供最頻繁使用的備選項;let qs = queryString.trim().toLocaleLowerCase();let searchItems = JSON.parse(JSON.stringify(this.searchItems));let r = searchItems.filter((v, i, ar) => {// 如果內容文本or速記符包含了輸入關鍵詞if (v.label.toLocaleLowerCase().includes(qs) ||(v.SJF || "").toLocaleLowerCase().includes(qs)) {let highlightLabel = `<b style='color:#409EFF;font-weight:bold;'>${queryString}</b>`;v.highlightLabel = v.label.replace(new RegExp(queryString, "gi"),highlightLabel);return v;}}); //從searchItems中搜索結果let perfectMatch = this.searchItems.find((v) => v.label === queryString);if (perfectMatch) {this.$emit(`s`, perfectMatch); //沒有點擊下拉框觸發獲取完全匹配項} else if (r.length === 0) {this.$emit(`s`, { ID: null, label: queryString }); //沒有找到匹配項}callback(r);},selectSuggestionsItem(d) {this.$emit(`s`, d);},clickSearchIcon(d) {this.focusAutocomplete();this.$emit(`search`, d);},},
};
</script>
<style lang="scss" scoped>
.autocompleteInput {
}
</style>
el-autocomplete那些在餓了么官方文檔看不到的API_el-autocomplete activated-CSDN博客文章瀏覽閱讀469次。在Vue的Autocomplete組件中，通過設置`activated`屬性為`true`和使用`suggestions`可以直接觸發下拉框內容更新。當點擊清除按鈕后，結合`$nextTick`確保焦點重新回到輸入框并顯示下拉框建議。https://blog.csdn.net/qq_37860634/article/details/130884352【sgAutocomplete】自定義組件：基于elementUI的el-autocomplete組件開發的自動補全下拉框組件（帶輸入建議的自動補全輸入框）_elautocomplete自定義-CSDN博客文章瀏覽閱讀1.2k次，點贊10次，收藏9次。1、支持本地保存選中過的記錄2、支持動態接口獲取匹配下拉框內容3、可以指定對應的顯示label和字段組件key。_elautocomplete自定義
https://blog.csdn.net/qq_37860634/article/details/134851806
