vueui框架之elementUI--input输入框的属性 :fetch-suggestions=querySearchAsync

起因是这样的，最近在使用vue+elementUi在模仿某些网站的页面。因为之前不经常使用UI框架去写页面，所以对一些东西比较好奇，所以想要看看是怎么回事。
然后在编写一个输入框的时候，主要需求是这样的：

一个输入框，输入框聚焦和有内容输入的时候，在输入框有个弹出列

那么，我找了elementUI上的这个输入框组件：如下图

组件对应的代码如下：

<el-autocompletev-model="state":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"
></el-autocomplete>
<script>export default {data() {return {restaurants: [],state: '',timeout:  null};},methods: {loadAll() {return [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" }];},querySearchAsync(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;clearTimeout(this.timeout);this.timeout = setTimeout(() => {cb(results);}, 3000 * Math.random());},createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}};
</script>

上面代码，大家都可以看懂。
下面进入正题：讲解一下:fetch-suggestions="querySearchAsync"这个属性
首先，看一下文档上的解释：如下图：

然后再结合代码看看：（这个代码是上面代码的一部分）：

<el-autocompletev-model="state":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"
></el-autocomplete>

querySearchAsync(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;clearTimeout(this.timeout);this.timeout = setTimeout(() => {cb(results);}, 3000 * Math.random());}

实际上，到这一步呢，我们应该是会有疑问的。
:fetch-suggestions="querySearchAsync"要我们出一个函数类型的值（类似：querySearchAsync），但是querySearchAsync函数里面有两个参数queryString, cb；这两个参数实际上我们都没有传的啊？那么这两个是怎么来的呢？
带上这个问题，我就开始探索一下“新世界”
我是怎么“探索”的：

打印一下，看看是“啥玩意”

然后在输入框里面输入点文字：如下图：

到这里，大家应该知道了，queryString是我们文本框里输入的内容。cb是一个函数

那么cb是会怎么样子呢？
我们来看看，我是直接点击我们打印的 f(){…},然后就出现下面的代码：如下图：

继续找,看看this.fetchSuggestions, 如下图：
相信到这里，大家就已经清晰明了了。
this.fetchSuggestions是一个注册属性，然后这个this.fetchSuggestions里面的参数是已经给我们写好的。我在传递的函数就直接操作这两个参数可以了，比如：可以直接通过queryString来发生异步数据请求，然后把请求回来的数据通过cb渲染到页面上。但是，cb里面传递的参数必须是一个数组，如果不是就会报错（不清楚请看上面的截图），而数组要传递的形式是如下：

[{"value": "aaa""gg": "123","lop": 3829},{"value": "bbb","jj": "yuuhs","gg": "ssxa"}
]

但是要在弹出列中显示数组中每个对象的哪个属性就得由value-key这个属性来决定，默认值是value如下图：

下面，我们来尝试使用这个属性：如下代码：
其他的都不变，只是在html中添加了value-key=“address”：

<template><div>home<el-autocompletev-model="state"value-key="address":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"></el-autocomplete></div>
</template>

结果如下：

到这里，就是我所有的探究到的内容。
很高兴很大家做分享，也希望可以帮助到刚入门学习前端的朋友。
如果又大佬发现我的文章有错误的地方，还请帮忙指出，不吝赐教。
如需要转载，请备注。
最后，希望各位在学习路上的朋友，继续前行，保持终生学习的习惯。
祝大家工作顺利，身体健康

vueui框架之elementUI--input输入框的属性 :fetch-suggestions=querySearchAsync相关推荐

Element-ui input 输入框限制只能输入数字的问题
需求说明后台管理系统,使用element-ui el-input组件,要求只能输入数字,最先使用的办法: <el-inputv-model.number='count'type='number ...
element-ui input输入框，校验不能输入中文和特殊字符，输入中文后，英文输不进去的问题
直接贴图了: 之前的写法是: @keyup.native="addForm.code = (addForm.code || '').replace(/[\u4E00-\u9FA5]|[\uF ...
Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
input 标签 autofill属性生效导致的输入框背景色变成黄色（或其他色）的解决办法
vue + elementui 登录页输入框autofill属性导致的背景色变色问题(使用原生input也会有) 方法一: 用box-shadow效果遮住:box-shadow:0 0 0px 10 ...
elementui文本框换行_解决Element UI input输入框不能使用回车进行搜索
css怎么让输入框不显示光标? css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大 ...
＜Input /＞输入框及input的相关属性
目录 1.name.type.value.accept.alt.checked.disabled.maxlength.readonly. size.src.这些属性是input元素的传统元素属性 2 ...
uniapp - [完美解决] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
效果图正常在uniapp项目中,用户想要输入数字或金额时,通常都会将 <input> 的 type 属性设置为 number.但是问题来了,可能在苹果IOS手机.小程序上.个别安卓机上就 ...
Vue+ElementUI 之 input输入框添加自定义图片
Vue+ElementUI 之 input输入框添加自定义图片效果图如图: <el-form ref="formData" :model="formData&q ...
JavaScript控制input输入框的required属性值
JavaScript控制input输入框的required属性值当我们在勾选上一个复选框之后,希望该选项的输入框成为必填项时,那么将会用到required这个属性在HTML中,required为属 ...
小程序中输入框input的type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...

vueui框架之elementUI--input输入框的属性 :fetch-suggestions=querySearchAsync

vueui框架之elementUI--input输入框的属性 :fetch-suggestions=querySearchAsync相关推荐

最新文章

热门文章