Element-UI之＜el-autocomplete＞标签在输入框输入匹配不到下拉列表中内容

功能需求：

• 查到另一张表的“姓名”字段，在输入框下有下拉框
• 可以输入，自动匹配下拉列表中的字段
• 鼠标点击在输入框，下拉列表出现

实现

• 使用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>