微信小程序模糊查询+自定义模态框

我们软件工程科的期末大作业要求是任意主题任意形式，做出一个真真实实的可以使用的软件网站等东西出来，我们小组的主题是动态营养搭配，做到搜索食物营养成分的时候有这样一个想法，怎样才能根据搜索的内容，类似于关键字之类的能直接搜索到想要的食物，例如紫菜，搜素’紫‘或者“菜”的时候都能够搜索到紫菜词条，以及数据库中数据尚未完善，在没有该条词条的时候弹出提示框。(写的时候没有想太多，方法较为粗暴)

于是上网搜索才了解到模糊查询的功能，在这里采用其中的indexOf方法进行模糊查询

这是js部分

// pages/searchFood/search.js
Page({
  data: {
    msg: [],
    chooseMsg: [],
    picUrl: '',
    isDisplay: '',
    showModal: false,
    // 成功
    ses: true,
    inputValue: ''
  },
  showDialogBtn: function () {
    this.setData({
      showModal: true
    })
  },
  /**
   * 弹出框蒙层截断touchmove事件
   */
  preventTouchMove: function () {},
  /**
   * 隐藏模态对话框
   */
  hideModal: function () {
    this.setData({
      showModal: false
    });
  },
  /**
   * 对话框取消按钮点击事件
   */
  onCancle: function () {
    this.hideModal();
  },
  /**
   * 对话框确认按钮点击事件
   */
  onConfirm: function (e) {
    this.hideModal();
  },
  returnPeronCenter: function (e) {
    var urlNew = e.currentTarget.dataset.url;
    // console.log(urlNew);
    wx.switchTab({
      url: urlNew,
    })
  },
  searchF: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
    let CountE = 0;
    for (var i = 0; i < this.data.msg.length; i++) {
      let arr = []
      let l = this.data.msg[i].name.length
      let arr2 = this.data.msg[i].name.split('')
      if (this.data.msg[i].name.indexOf(e.detail.value) >= 0) {
        this.setData({
          picUrl: this.data.msg[i].picUrl
        })
        // console.log(this.data);
        arr.push({
          "能量": this.data.msg[i].nengliang == null ? '无' : this.data.msg[i].nengliang,
          "蛋白": this.data.msg[i].danbai == null ? '无' : this.data.msg[i].danbai,
          "水分": this.data.msg[i].shuifen == null ? '无' : this.data.msg[i].shuifen,
          "碳水": this.data.msg[i].tanshui == null ? '无' : this.data.msg[i].tanshui,
          "脂肪": this.data.msg[i].zhifang == null ? '无' : this.data.msg[i].zhifang,
          "铜": this.data.msg[i].tong == null ? '无' : this.data.msg[i].tong,
          "锌": this.data.msg[i].xin == null ? '无' : this.data.msg[i].xin,
          "铁": this.data.msg[i].tie == null ? '无' : this.data.msg[i].tie
        })
        this.setData({
          chooseMsg: arr
          // inputValue:''
        })
      } else {
        CountE++;
        console.log(CountE);
      }
      this.setData({
        inputValue: ''
      })
    }
    // 判断循环结束之后查询出来的是否有东西，有的话就是正确查询，没有就是错误查询
    if (CountE == 8) {
      this.showDialogBtn()
    }
  },
  onLoad(options) {
    wx.request({
      url: 'http://127.0.0.1:9999/More/serachFood',
      success: (result) => {
        this.setData({
          msg: result.data
        })

      }
    })
  }
})

这是wxml部分

	
		
		搜索成分
	


	
		
		
		
			
			
				
			
			数据库中暂时没有此类食物，期待一下吧
			
				确定
				
				取消
				
			
		
	
	
		

			
			
				
				
				
			

		
	

	
		营养信息
		每100克

		
			
			
				{{key}} {{value}}
				
			


		


	

这是wcss部分

    /**index.wxss**/
    .show-btn {
    	margin-top: 100rpx;
    	color: #22cc22;
    }

    .modal-mask {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	background: #000;
    	opacity: 0.5;
    	overflow: hidden;
    	z-index: 9000;
    	color: #fff;
    }

    .modal-dialog {
    	width: 540rpx;
    	overflow: hidden;
    	position: fixed;
    	top: 50%;
    	left: 0;
    	z-index: 9999;
    	background: #f9f9f9;
    	margin: -180rpx 105rpx;
    	border-radius: 8px;
    }

    .modal-title {
    	padding-top: 30rpx;
    	padding-bottom: 30rpx;
    	font-size: 14px;
    	color: #030303;
    	text-align: center;
    }

    .modal-img {
    	width: 40px;
    	height: 40px;
    	margin: 0 auto;
    	margin-top: 20rpx;
    }

    .modal-img image {
    	width: 100%;
    	height: 100%;
    }



    .modal-footer {
    	display: flex;
    	flex-direction: row;
    	height: 86rpx;
    	border-top: 1px solid #dedede;
    	font-size: 34rpx;
    	line-height: 86rpx;
    }

    .btn-cancel {
    	width: 50%;
    	color: #8f8f8f;
    	background-color: #f2f2f2;
    	text-align: center;
    	border-right: 1px solid #dedede;
    }

    .btn-confirm {
    	width: 50%;
    	color: #8f8f8f;
    	background-color: #f2f2f2;
    	text-align: center;
    }

    .btn-confirms {
    	width: 100%;
    	background-color: #f2f2f2;
    	color: #8f8f8f;
    	text-align: center;
    }

以下是页面效果

数据库中没有该类食物

搜索紫或者菜或者紫菜都可以显示出来

 其中模态框部分借鉴(代码大部分没有变)自 http://t.csdn.cn/Jjtmc

稍加修改而成，图标是在iconfont字体库里下载的

https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4090258

模糊查询部分写的时候用的方法比较粗暴...

功能完善中，页面也比较简陋，还请不要嫌弃...

若有不妥之处，还请各位大佬不吝赐教~