vue仿美团饿了么，搜索框模糊查询，并显示

首先需要一个容器ul来放模糊查询出来的数据
定义一个空数组，判断输入的内容长度是否大于0，用过滤器filter，过滤shops（所有的数据），如果要搜索框中的内容与每一个businessName有相同的地方，具体可以看search方法使用，就把当前内容放在定义好的空数组中。

searchKeyup(shops){
			this.ulList = [];
			if(this.inputText.length>0){
				shops.filter(item => {
					if(item.businessName.search(this.inputText) !==-1){
						this.ulList.push(item);
					}
				})
			}
		},

这里实现了点击搜索按钮，以及点击模糊查询中的单个内容，都能查询到相应数据
点击搜索按钮，也就是将模糊查询的数据全部输出。

searchFood(shops){
			this.shopList = [];
			this.ulList = [];
			if(!this.inputText){
				this.$alert('请输入内容', '错误提示', {
				  confirmButtonText: '确定',
				});
			}else{
				//过滤器过滤输入框中的值是否匹配，放在显示的数组中
				shops.filter(item => {
					if(item.businessName.search(this.inputText) !==-1){
						this.shopList.push(item);
					}

				})
				//如果没有匹配的值，则弹窗提醒
				if(this.shopList.length <= 0){
					this.$alert('没有搜到相关商家信息', '错误提示', {
					  confirmButtonText: '确定',
					});
					// 最后返回所有匹配的值
				}else{
					this.inputText = "";
					return this.shopList;
				}
			}
			
			
		}

点击模糊查询中其中一个数据也就是传入参数key值，并输出当前key值对应的数据。

searchUl(shops,key){
			this.shopList = [];
			this.inputText = "";
			shops.filter(item => {
				if(item.businessName == this.ulList[key].businessName){
					this.shopList.push(item);
					this.ulList = [];
					
				}
				return this.shopList;
			})
			
		},