欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementUI 之 Input 输入框,带输入建议

程序员文章站 2022-01-05 10:50:55
...

下面代码段来自官方文档,只是添加了注释!

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-row class="demo-autocomplete">
  <el-col :span="12">
    <div class="sub-title">**即列出输入建议</div>
    <el-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
  <el-col :span="12">
    <div class="sub-title">输入后匹配输入建议</div>
    <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
</el-row>
</div>
var Main = {
    data() {
      return {
        //①
        restaurants: [],
        state1: '',
        state2: ''
      };
    },
    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();
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

解释如下:
①处的变量restaurants
1、其数据类型是对象数组。在真正项目中,其值应该是从后端查询得到的,该示例为方便演示使用了硬编码。
2、对其第一个值:{ “value”: “三全鲜食(北新泾店)”, “address”: “长宁区新渔路144号” },address属性未使用,你可以忽略它。变量value你以随意修改,只要与这处的代码保持一致即可:return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);

②处的函数querySearch(queryString, cb)
1、queryString代表用户输入的查询字符串,例如输入“三全”,会出现“三全鲜食(北新泾店)”,此时queryString的值等于“三全”。
2、我们没有指定cb的值,但经调试后发现,它并不是undefined,而是如下所示,不太理解:)

function(e) {
  t.loading = !1,
  t.suggestionDisabled || (Array.isArray(e) ? (t.suggestions = e, t.highlightedIndex = t.highlightFirstItem ? 0 : -1) : console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array'))
}

③处
1、如果用户输入了查询字符串,则对候选值集合进行过滤,过滤条件是:

  • 忽略大小写
  • 以输入的查询字符串开头

2、如果想改为只要包括了查询字符串就显示,可以将上文中的 === 0改为 !== -1

相关标签: elementUI