el-autocomplete use

案例

The case shows the effect：

代码实现：

​ **特别说明：**The following code only represents the general idea

<template>
  <div>
    <h1>search lookup</h1>
    <el-autocomplete
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
      @input="changeStyle('block', '.el-autocomplete-suggestion')"
      @keyup="changeStyle('block', '.el-autocomplete-suggestion')"
    ></el-autocomplete>
  </div>
</template>
<script>

export default {
  data() {
    return {
      inputValue: "",
      allInfos: [
          { "value": "abcddtrr", "name": "看自身情况" },
          { "value": "abc", "name": "看自身情况" },
          { "value": "dtrr", "name": "看自身情况" },
          { "value": "ddtrrdf", "name": "看自身情况" },
          { "value": "ccdvvffrf", "name": "看自身情况" },
          { "value": "adsadsdsd", "name": "看自身情况" },
          { "value": "vfrtssg", "name": "看自身情况" },
      ]
    }
  },
  mounted() {},
  methods: {
    handleSubmit() {
      // 在handleSubmit的时候调用changeStyle方法,传入的状态为none（表示让输入建议框隐藏）
      this.changeStyle("none", ".el-autocomplete-suggestion");
     //根据自身情况
     //该方法是提交时触发
    },
    //输入框获取焦点时调用的方法
    querySearch(queryString, cb) {
    //allInfos是怎么来,是从父组件传过来的还是在自己组件调用api接口拿到的还是其他
    //我这里的allInfos是从父组件传过来的,在这里也举例子组件从父组件传值
      let results = this.allInfos;
      results = queryString
        ? results.filter(this.createFilter(queryString))
        : results;
    // Control the number of impressions,Prevent the data from being too large and taking too long to load,影响体验
      if(results.length > 100) {
          results.splice(100,results. length-1);
      }
    // 返回筛选出的结果数据到输入框下面的输入列表
      cb(results);
    },
    // Fired when data is entered,筛选出和输入数据匹配的建议输入.
    // 调用match方法,是模糊匹配;官方调用的是indexOf,是精确匹配,看自身情况选择
    createFilter(queryString) {
      return (item) => {
        return item.value.toUpperCase().match(queryString.toUpperCase());
      };
    },
    //根据传进来的状态改变建议输入框的状态（展开|隐藏）
    changeStyle(status, className) {
      let dom = document.querySelectorAll(className);
      dom[0].style.display = status;
    },
  }
}

方法详解

element UIwith input suggestions官方文档

建议先看官方文档,Here is an appropriate addition to the official documentation

引用el-autocomplete

在需要的地方引用

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSubmit"
    ></el-autocomplete>

v-model=“inputValue” ：与inputValue绑定值,即,自动输入建议的值可以通过inputValue拿到.

:fetch-suggestions=“querySearch” ：输入框一获取焦点.就会自动调用该方法拿到数据,These data are the data obtained by fuzzy query.

@select=“handleSelect” ： 当选中建议项时,调用该方法.

触发带输入建议的两种方式

• 1.输入框获取焦点时就触发

这是默认的

• 2.输入值后匹配触发

在组件上加上:trigger-on-focus=“false”

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
    ></el-autocomplete>

fetch-suggestions方法的数据结构

文档里面,The data result of the callback is an array object,There must be one in the object**value的属性**.否则,The data to be input suggested cannot be rendered.

[
          { "value": "xxx(在输入建议看到的值,必需)", "address": "看自身情况" },
]

如果,The data we got is like this,虽然也是数组,但是数组里的对象属性不一样.

this.modelInfos=
[
          {
     "modelId": "1", "modelName": "a1",type:"c" },
          {
     "modelId": "2", "modelName": "a2",type:"c" },
          {
     "modelId": "3", "modelName": "a3",type:"c" },
          {
     "modelId": "4", "modelName": "a4",type:"c" },
]

可以使用map返回想要的数据结构.

 this.allInfos= this.modelInfos.map((terminal) => {
    
        return {
    
          value: modelName,
          name: modelId,
        };
      });
console.log(this.allInfo);

可能会遇到的问题

1、How to increase the carriage return trigger event

在组件里增加 @keyup.enter.native方法

2、How to solve the case where the input content has no suggested content,不显示下拉框

在组件里增加 trigger-on-focus属性

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
    ></el-autocomplete>

3、How to solve the suggestion input box does not disappear after carriage returnbug

如果增加了回车事件,那么输入数据回车后,输入建议框没有自动消失,该如何解决？

Add methods to components：@input（在输入值发生改变的时候触发changeStyle方法）

@keyup（按键松开触发的事件,也就是回车时触发changeStyle方法）

传入的“block”是让输入框建议展开,'.el-autocomplete-suggestion’是输入建议框的类名

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
      @input="changeStyle('block', '.el-autocomplete-suggestion')"
      @keyup="changeStyle('block', '.el-autocomplete-suggestion')"
    ></el-autocomplete>

    //根据传进来的状态改变建议输入框的状态（展开|隐藏）
    changeStyle(status, className) {
      let dom = document.querySelectorAll(className);
      dom[0].style.display = status;
    },

在handleSubmit的时候调用changeStyle方法,传入的状态为none（表示让输入建议框隐藏）

handleSubmit() {
      this.changeStyle("none", ".el-autocomplete-suggestion");    
    },