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"。

其他问题遇到继续补充。