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 = resthis.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);}}