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

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

于是上网搜索才了解到模糊查询的功能，在这里采用其中的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部分

<view class="custom flex_center">
	<view style="font-size: 35rpx;padding-top: 80rpx;padding-left: 30rpx;padding-bottom: 10rpx;" bindtap="returnPeronCenter" data-url="/pages/personCenter/mine">
		<image src="/img/zuo.png" style="width: 30rpx;height: 30rpx;" mode="" />
		搜索成分
	</view>
</view>
<view class="body" style="padding: 20rpx;">
	<view class="modelBox">
		<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
		<!-- 成功 -->
		<view class="modal-dialog" wx:if="{{showModal && ses}}">
			<view class="modal-img">
			
				<image src="/img/惊叹号、感叹号.png" mode="widthFix" />
			</view>
			<view class="modal-title">数据库中暂时没有此类食物，期待一下吧</view>
			<view class="modal-footer">
				<view class="btn-confirms" bindtap="onConfirm" data-status="confirm" data-name="{{name}}">确定
				</view>
				<view class="btn-confirms" bindtap="onCancle" data-status="confirm" data-name="{{name}}">取消
				</view>
			</view>
		</view>
	</view>
	<view class="fromV">
		<form bindsubmit="">
			<!-- 搜索框 -->
			<view class="search"  style="border: 1px solid black;">
				<image style="width: 40rpx;height: 40rpx;float: right;margin:0 8rpx 0 10rpx;" src="/img/237拍照-线性.png" mode="" />
				<image style="width: 40rpx;height: 40rpx;float: left;margin:8rpx 4rpx 0 10rpx;" src="/img/搜索.png" mode="" />
				<input type="search" value="{{inputValue}}" style="caret-color:#ccc;font-size: 30rpx;text-align: center; border-left: 1px solid black;border-right: 1px solid black;margin-left: 45rpx;margin-right: 45rpx;" placeholder="输入您想要的搜索的食物名称" name="" id="" bindblur="searchF" />
			</view>

		</form>
	</view>

	<view class="content" style=" border: 1px solid #ccc; margin-top: 40rpx;border-radius: 8px 8px, 0px, 0px;background: rgba(255, 255, 255, 1);">
		<view class="tit" style="display: inline-block;font-size: 45rpx;font-weight: 600;margin: 20rpx 0 20rpx 20rpx;">营养信息</view>
		<view class="every" style="display: block; float: right;font-size: 25rpx;margin: 40rpx 20rpx 20rpx 0;">每100克</view>

		<view class="have" style="font-size: 30rpx;" wx:for="{{chooseMsg}}" wx:for-item="item" wx:key="index">
			<image src="{{picUrl}}" mode="" style="width: 100%;padding: 30rpx;" />
			<view class="ha" wx:for="{{item}}" wx:for-item="value" wx:for-index="key" wx:key="index" style="margin-top: 30rpx;">
				<view class="h" style="border-top: 1px solid black;padding-bottom: 20rpx;padding-top: 20rpx;">{{key}} <view class=" hanl" style="display:block;float:right;margin-right: 20rpx;">{{value}}</view>
				</view>
			</view>


		</view>


	</view>
</view>

这是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

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

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

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