300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Element UI input输入框实现模糊查询

Element UI input输入框实现模糊查询

时间:2018-08-27 01:31:25

相关推荐

Element UI input输入框实现模糊查询

Element UI的input输入框进行搜索的时候(根据输入内容提供对应的输入建议)有个坑,它只能用第一个字进行搜索,不能够实现模糊匹配,下面的方法就是填这个坑。

原来搜“奖”,后台给返回数据,但是不会出现下拉框。

例如:

只要搜“抽”才出现下拉框

解决后实现效果:

代码如下:

<el-row class="demo-autocomplete"><el-col :span="12"><el-autocompleteclass="inline-input"v-model="name":fetch-suggestions="querySearch"placeholder="请输入内容":trigger-on-focus="false"@select="handleSelect"@input="changeData"></el-autocomplete></el-col></el-row>

<script>export default {data() {return {name:"",//藏品名称restaurants: [],}},methods: {querySearch(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;cb(results);},createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);};},//@select 点击选中建议项时触发handleSelect(item) {this.name=item.valuethis.select=item.valuethis.getnumber()},//@input 在 Input 值改变时触发changeData(value){if(value!=''){this.handleChange()}else {this.image = ''this.select=""}},// 接口async handleChange() {let param={type:"collection",name:this.name};await this.$api.operateMgmt.synthesisWorks(param).then((res) => {if (res.code == 200) {this.restaurants=res.data.map(item=>{return{value:item.title}})this.image=res.data[0].imagethis.worksId=res.data[0].id} else {this.$message({message: res.message,type: "error",duration: mon.duration,});}});},}</script>

重点:

createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);};},//这里大于-1可以实现模糊查询,如果你要搜“奖”,就会搜到含“奖”的所有字

如果使用Element UI里面的

createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},//这里等于0只能搜“奖”开头的字

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。