Vue+ElementUI实现input框模糊查询提醒
先是用了ElementUI中给的el-autocomplete例子:<el-form-item><el-autocompleteclass="inline-input"v-model="tableData.name":fetch-suggestions="querySearch"placehold
·
先是用了ElementUI中给的el-autocomplete例子:
<el-form-item>
<el-autocomplete
class="inline-input"
v-model="tableData.name"
:fetch-suggestions="querySearch"
placeholder="请输入内容">
</el-autocomplete>
</el-form-item>
data中的数据定义:
data:{
tableData:{
name:'',
},
nameTipsArray:[],//用于存放下拉提醒框中数据的数组
nameArray:['name1','name2','name3']//页面初始化时全部数据
}
然后对v-model绑定的tableData.name进行watch监听:
watch:{
'table.name':{
handler: function() {
this.nameTipsArray = [];//这是定义好的用于存放下拉提醒框中数据的数组
var len = this.nameArray.length;//nameArray是页面初始化时全部数据
var arr = [];
for (var i = 0; i < len; i++) {//根据输入框中inputName的值进行模糊匹配
if (this.nameArray[i].indexOf(this.inputName) >= 0) {
arr.push(this.nameArray[i]);//符合条件的值都放入arr中
}
}
console.log(arr);
//el-autocomplete元素要求数组内是对象,且有value属性,此处做一个格式调整
for (var i = 0; i < arr.length; i++) {
var obj = { value: "" };
obj.value = arr[i];
this.nameTipsArray.push(obj);
}
}
}
}
然后querySearch:
methods:{
querySearch(queruString, cb){
var nameTipsArray = this.nameTipsArray;
cb(nameTipsArray);
}
}
注意:有待优化,输入第二个字符串时才开始执行匹配查询,
此程序在页面初始时已将全部数据先转换赋值到this.nameTipsArray一次
更多推荐
已为社区贡献1条内容
所有评论(0)