技術標籤：VUEElement-UIel-autocompletevuefilter

功能需求：

• 查到另一張表的“姓名”欄位，在輸入框下有下拉框
• 可以輸入，自動匹配下拉列表中的欄位
• 滑鼠點選在輸入框，下拉列表出現

實現

• 使用Element-UI前端模板 ，< el-autocomplete> 之 “自定義模板” 標籤
• 複製到程式碼中後，在輸入框輸入 “三” 之後，下拉列表中不能匹配到下拉框中欄位

解決

• 過濾方法中,這裡是=== 0，indexOf（）方法是返回包含的位置，並不是存在===0，不存在===-1

restaurant.crewName.indexOf(queryString) === 0
 

所以將這個改成 >= 就可以了

<template>
  <div class="app-container">
    <el-dialog
      :title="title"
      top="30px"
      :center="false"
    >
      <el-form ref="mainForm" :rules="rules" :model="mainForm" label-width
 
="100px" class="rcxc-edit-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="想定名稱" prop="sceName">
              <el-input v-model="mainForm.sceName" placeholder="請輸入" />
 

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="編寫人員" prop="sceUser">
              <el-autocomplete
                v-model="mainForm.sceUser"
                :fetch-suggestions="querySearch"
                placeholder="請輸入內容"
                @select="handleSelect"
              >
                <i
                  slot="suffix"
                  class="el-icon-edit el-input__icon"
                  @click="handleIconClick"
                />
                <template slot-scope="{ item }" :data="mainForm">
                  <div class="name" @click="checkName(item.crewName)">{{ item.crewName }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">確 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TrainingScenarioEdit',
  data() {
    return {
      restaurants: [
        {
          crewName: '',
          crewType: ''
        }
      ],
      mainForm: {
        id: '',
        sceName: '',
        sceUser: '', // 編寫人員
      },
    }
  },
  methods: {
    loadAll() {
      list(this.crewInfo).then(res => {
        console.log('res', res)
        this.restaurants = res.rows
      })
    },
    // 點選圖示，刪除輸入框的內容
    handleIconClick(ev) {
      console.log('ev', ev)
        this.mainForm.sceUser=''
    },
    checkName(crewName) {
      this.mainForm.sceUser = crewName
    },
    // 返回輸入建議的方法，僅當你的輸入建議資料 resolve 時，通過呼叫 callback(data:[]) 來返回它
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 呼叫 callback 返回建議列表的資料
      cb(results)
    },

    // 點選選項時找到id並賦值
    handleSelect(result) {
      console.log('result', result)
      this.mainForm.sceUser = result.crewName
    },
    // 過濾作用
    createFilter(queryString) {
      return (restaurant) => {
        console.log('indexOf' + restaurant.crewName.indexOf(queryString))
        return (restaurant.crewName.indexOf(queryString) >= 0) 
      }
    }
  }
}
</script>