項(xiàng)目需求：需要用戶(hù)在輸入框中輸入公司 全名? ? 但是為了避免用戶(hù)輸入不全? ?需要做一個(gè)帶輸入建議的輸入框
element組件：
<el-autocomplete? ? ? ?
????????class="inline-input"? ? ? ? ??
????????v-model="state1"? ? ? ? ?
????????placeholder="請(qǐng)輸入內(nèi)容"? ? ?
????????:fetch-suggestions="querySearch"? ? ? ?
????????????????// fetch-suggestions?是一個(gè)返回輸入建議的方法屬性? ? ? ? ?:trigger-on-focus="false"? ? ? ? ? ? ? ?
?????????????????//? false = >輸入后匹配輸入建議? true =>?激活即列出輸入建議????????@select="handleSelect"? ? ? ? ? ? ? ?
????????????????? //?點(diǎn)擊選中建議項(xiàng)時(shí)觸發(fā)? handleSelect>? ?
</el-autocomplete>
在輸入框變化時(shí) 會(huì)觸發(fā)??querySearch 函數(shù)? ? 獲取到當(dāng)前輸入的字段? 然后調(diào)用 createFilter 函數(shù) 篩選數(shù)據(jù)
下圖為官方寫(xiě)法??
官方寫(xiě)法將 全部數(shù)據(jù) 放在 loadAll 函數(shù)里? ?然后通過(guò)?createFilter 函數(shù)做篩選
而我需要從后臺(tái)獲取數(shù)據(jù)。
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.length;i++){
????????????????????????data.data[i].value = data.data[i].companyName;? ?
????????????????}
????????????????cb(data.data);
? ? ? });
}
?我需要篩選的數(shù)據(jù)字段名并不是value,所以現(xiàn)在需要遍歷數(shù)組把篩選字段換成value
最后將數(shù)據(jù) cb() 回去??返回到 autocomplete 組件中?
