vue实现模糊搜索功能
根据输入的内容进行查找数据,然后展示含有输入内容的数据
<input v-model="issue_content" v-on:input ="inputFunc" type="text" placeholder="如何修改密码">
<div class="serch_result" v-show="serch_result_issue">
<li v-for="item in searchData">
{{ item.name }}
</li>
</div>
数据结构
data () {
return {
issue_content:"",//输入框中的内容
serch_result_issue:false,//控制搜索的问题显示隐藏
serch_result:[
{name:"忘记了密码怎么办?"},
{name:"如何成为星签约者"},
{name:"什么样的文章能够被星官方推荐"},
{name:"我在哪里可以找到自己发布的文章"},
{name:"忘记了密码怎么办"}
]
}
},
methods:{
//监听输入事件,当input中有内容时,下面的搜索列表显示出来
inputFunc(){
if(this.issue_content.length>0){
this.serch_result_issue = true;
}else{
this.serch_result_issue = false
}
}
},
//计算属性,当输入内容的时候下面的方法就会根据你输入的内容来过滤serch_result数组中的数据
computed: {
searchData() {
var issue_content = this.issue_content;
if (issue_content) {
return this.serch_result.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toLowerCase().indexOf(issue_content) > -1
})
})
}
return this.products;
}
}
vue-element ui改编input模糊查询
<el-autocomplete class="inline-input" value-key='name' v-model="input" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
data:{
return{
input:''
}
},
methods:{
async querySearch(queryString, cb) {
var chId = '';
var user = {
mer_id:'',
ch_id:chId
}
//这里是从后台获取数据
await getMohu(queryString,user).then(res=>{
// this.restaurants = res
this.restaurants = [
{
name:'粤A05965D'
},
{
name:'粤A02637D'
},
{
name:'粤A02891D'
}
]
var restaurants = this.restaurants;
var results = queryString
? this.searchData(queryString)
: restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
})
},
searchData(issue_content) {
return this.restaurants.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toUpperCase().indexOf(issue_content) > -1
})
})
return this.products;
},
handleSelect(item) {
console.log(item);
}
}
转自:https://blog.csdn.net/wodebokecsdn/article/details/83539861