element UI el-autocomplete 带输入建议的输入框

项目需求:需要用户在输入框中输入公司全名但是为了避免用户输入不全需要做一个带输入建议的输入框

element组件:

el-autocomplete

class="inline-input"

v-model="state1"

placeholder="请输入内容"

:fetch-suggestions="querySearch" // fetch-suggestions 是一个返回输入建议的方法属性

:trigger-on-focus="false" // false = >输入后匹配输入建议 true => 激活即列出输入建议

@select="handleSelect" // 点击选中建议项时触发 handleSelect

在输入框变化时会触发 querySearch 函数获取到当前输入的字段然后调用 createFilter 函数筛选数据

下图为官方写法

官方写法将全部数据放在 loadAll 函数里然后通过 createFilter 函数做筛选

而我需要从后台获取数据。

querySearch(queryString, cb) {

this.$http({

url: this.$http.adornUrl("/sys/selct/companyname"),

method: "post",

params: this.$http.adornParams({

companyName:queryString

})

}).then(({ data }) => {

for(var i=0;i

data.data[i].value = data.data[i].companyName;

}

cb(data.data);

});

}

我需要筛选的数据字段名并不是value,所以现在需要遍历数组把筛选字段换成value

最后将数据 cb() 回去返回到 autocomplete 组件中

element UI el-autocomplete 带输入建议的输入框相关推荐

Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
Element UI el-input 标签，正则表达式限制输入框内容（中文，英文，邮箱，手机号）
设置限制只能输入中文校验中文的正则:/^[\u4e00-\u9fa5]+$/ rules: {title: [{ required: true, message: "请输入中文名" ...
Element UI 数字输入框的实现
方法一:添加正则校验缺点:需要根据需要变更正则表达式 <template><el-form ref="formRef" :model="formDat ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
element UI的带输入建议el-autocomplete总结（详细，全）
Table of Contents 引用el-autocomplete 触发带输入建议的两种方式转成输入建议回调的数据结构增加回车触发事件解决回车后建议输入框没消失的bug vue+elemen ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
Element UI输入框focus()方法自动获取焦点失败处理方法
Element UI输入框focus()方法自动获取焦点失败处理方法本来想通过自定义事件触发输入框,并获取焦点,但是使用官方提示的focus()方法一直失效后来百度了半天,终于找到一个比较好的 ...
【vue】element ui的el-input 输入框不能输入值
前言在使用element ui的el-input 输入框时,无法输入内容,后来发现是因为没有给input绑定值(v-model) 原因 Input 为受控组件,它总会显示 Vue 绑定值.(所以必须 ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...

element UI el-autocomplete 带输入建议的输入框

element UI el-autocomplete 带输入建议的输入框相关推荐

最新文章

热门文章