我们软件工程科的期末大作业要求是任意主题任意形式，做出一个真真实实的可以使用的软件网站等东西出来，我们小组的主题是动态营养搭配，做到搜索食物营养成分的时候有这样一个想法，怎样才能根据搜索的内容，类似于关键字之类的能直接搜索到想要的食物，例如紫菜，搜素’紫‘或者“菜”的时候都能够搜索到紫菜词条，以及数据库中数据尚未完善，在没有该条词条的时候弹出提示框。(写的时候没有想太多，方法较为粗暴)
于是上网搜索才了解到模糊查询的功能，在这里采用其中的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
模糊查询部分写的时候用的方法比较粗暴...
功能完善中，页面也比较简陋，还请不要嫌弃...
若有不妥之处，还请各位大佬不吝赐教~
扫一扫
7630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
