vue+elementUI input框之过滤显示
程序员文章站
2022-06-07 15:32:35
...
效果图如下:
<el-form-item label="Test Filter: ">
<el-autocomplete
class="inline-input"
v-model="form.filter"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
</el-form-item>
methods:{
querySearch(queryString,cb){
let arr = [
{name:'a',value:'he is a gril'},
{name:'b',value:'good name'},
{name:'c',value:'how boy'},
];
let results = queryString ? arr.filter((currentValue,index,arr) => {
console.log(currentValue);//item的每一项
console.log(arr);//arr数组
return (currentValue.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);//满足条件的返回
},this):arr;
cb(results)
},
}
上一篇: linux下mysql乱码问题的解决方案
下一篇: 唐代聂隐娘究竟是谁?最后结局如何?
推荐阅读
-
Android开发技巧之永不关闭的Toast信息框(长时间显示而非系统关闭)
-
js实现input密码框显示/隐藏功能
-
css样式之区分input是按钮还是文本框的方法第1/4页
-
将input框中输入内容显示在相应的div中【三种方法可选】
-
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
-
js实现input密码框显示/隐藏功能
-
autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示
-
jquery的选择器的使用技巧之如何选择input框
-
css样式之区分input是按钮还是文本框的方法第1/4页
-
将input框中输入内容显示在相应的div中【三种方法可选】