elementui元件el-autocomplete 聯想搜尋

autocomplete

是一個可帶輸入建議的輸入框元件，

fetch-suggestions

是一個傳回輸入建議的方法屬性，如

querySearch(queryString, cb)，

在該方法中你可以在你的輸入建議資料準備好時通過

cb(data)

傳回到

autocomplete

元件中。

使用之前建議參考官方文檔

input根據輸入内容提供對應的輸入建議https://element.eleme.cn/#/zh-CN/component/input

使用元件遇到的問題

• 輸入建議回調的資料結構
• 增加回車觸發事件
• 規則校驗不生效
• 表單隻有一個input，回車事件時需要禁止預設送出表單

輸入建議回調的資料結構

//官網使用列子
<el-autocomplete
 class="inline-input"
  v-model="state1"
  :fetch-suggestions="querySearch"
  placeholder="請輸入内容"
  @select="handleSelect"
></el-autocomplete>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 調用 callback 傳回建議清單的資料
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
        //
          { "value": "三全鮮食（北新泾店）", "address": "長甯區新漁路144号" },
          { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長甯區淞虹路661号" },
          { "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988号創邑金沙谷6号樓113" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>
           

• 問題：擷取到後端傳回的數組，并将數組傳入作為

  results

  傳入

  callback

  後，焦點放在 輸入框 上的時候，并未出現任何内容，隻出現了一個不完整的空白框。
• 原因：預設綁定

  data:[] 中的 value

  字段。
• 解決辦法：（看了好多方法，其實這裡不需要很麻煩的轉換資料結構）官網提供了

  屬性value-key

  ，指派成你需要的字段即可。

  

//我這裡需要的字段名稱為companyName
<el-autocomplete
   class="inline-input"
   v-model="searchForm.searchCompany"
   :fetch-suggestions="querySearch"
   placeholder="請輸入企業關鍵字"
   @select="handleSelect"
   value-key="companyName"
   @keydown.native.enter="companyPolicyHandel"
 ></el-autocomplete>
           

增加回車觸發事件

• 問題：

  @keydown.enter

  事件觸發不了
• 原因：element-ui自身封裝了一層

  input标簽

  之後，把原來的事件隐藏了，加上

  .native

  可以監聽到元件根元素的原生事件
• 解決方法：使用

  @keydown.native.enter

規則校驗不生效

一開始觸發條件使用了blur,改成change就好了，具體原因正在考察中。

searchRule: {
 searchCompany: [
     {required: true, message: '企業不能為空', trigger: 'change'}
   ],
 },
           

表單隻有一個input，回車事件時需要禁止預設送出表單

• 問題：表單隻有一個input，回車預設送出表單。導緻第一次回車就會重新整理頁面，再次回車，才出發回車事件。
• 解決：當一個 form 元素中隻有一個輸入框時，在該輸入框中按下回車會送出該表單。如果希望阻止這一預設行為，可以在标簽上添加

  @submit.native.prevent。

  或者為表單元素增加屬性

  onSubmit="return false"。

其他問題遇到繼續補充。