[微信小程序]搜索功能实现 搜索框样式

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

上效果图:

一:搜索框功能实现

1.在首页做一个搜索框的样式并实现跳转到搜索页面

<view class='page_row' bindtap="suo"><view class="search"><view class="df search_arr"><icon class="searchcion" size='20' type='search'></icon><input class="" disabled placeholder="请输入关键字" value="{{searchValue}}"/></view></view><view class='sousuo'>搜索</view></view>

.search{width: 80%;}.search_arr {border: 1px solid #d0d0d0;border-radius: 10rpx;margin-left: 20rpx;}.search_arr input{margin-left: 60rpx;height: 60rpx;border-radius: 5px;}.bc_text {line-height: 68rpx;height: 68rpx;margin-top: 34rpx;}.sousuo {margin-left: 15rpx;width: 15%;line-height: 150%;text-align: center;border: 1px solid #d0d0d0;border-radius: 10rpx;}.page_row{display: flex;flex-direction: row}.searchcion {margin: 10rpx 10rpx 10rpx 10rpx;position: absolute;left:25rpx;z-index: 2;width: 20px;height: 20px;text-align: center;}

js.点击跳转到搜索的页面

suo: function (e) {wx.navigateTo({url: '../search/search',})},

2.搜索页面实现搜索功能

<!--pages/search/search.wxml--><view class="search page_row"><input class="df_1" placeholder="请输入你有搜索的内容" value="{{searchValue}}" bindinput="searchValueInput" /><button bindtap="suo" data-id='1'>媒婆</button><button bindtap="suo" data-id='2'>单身</button></view><view class="search_no" wx:if="{{!centent_Show}}"><text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text></view><import src="../index/card/card.wxml" /><template is="nanshen_card" data="{{nanshen_card,img}}" />

var app = getApp();var searchValue =''// pages/search/search.jsPage({data: {centent_Show: true,searchValue: '',img: '',nanshen_card:''},onLoad: function () {},searchValueInput: function (e) {var value = e.detail.value;this.setData({searchValue: value,});if (!value && this.data.productData.length == 0) {this.setData({centent_Show: false,});}},suo:function(e){var id= e.currentTarget.dataset.idvar program_id = app.program_id;var that = this;wx.request({url: 'aaa.php',//这里填写后台给你的搜索接口method: 'post',data: { str: that.data.searchValue, program_id: program_id, style:id },header: {'content-type': 'application/x-www-form-urlencoded'},success: function (res) {if(res.data.length ==0){that.setData({centent_Show: false,});}that.setData({nanshen_card: res.data,});},fail: function (e) {wx.showToast({title: '网络异常！',duration: 2000});},});}});

/* pages/search/search.wxss */@import "../index/card/card";.searchcion{width: 24px;height: 24px;text-align: center;margin-top: 5rpx}.search{padding: 1% 3%;background: #D0D0D0;}.search input{width: 85%;border-radius: 5px;background: #fff;border: none;font-size: 12px;padding:1% 2.5%;margin-right: 5px;}.search button{line-height:30px;text-align: center;border: none;font-size: 28rpx;background: white}

php实现代码

<?phpheader("Content-Type:text/html;charset=utf8"); header("Access-Control-Allow-Origin: *"); //解决跨域header('Access-Control-Allow-Methods:POST');// 响应类型 header('Access-Control-Allow-Headers:*'); // 响应头设置 $link=mysql_connect("localhost","root","root"); mysql_select_db("shige", $link); //选择数据库mysql_query("SET NAMES utf8");//解决中文乱码问题$str = $_POST['str'];//SQL查询语句 SELECT * FROM 表名 LIKE 模糊搜索的变量$q="SELECT * FROM curriculum WHERE CONCAT_WS('',school,college,major,mtype,title) LIKE '%{$str}%'";$rs = mysql_query($q); //获取数据集if(!$rs){die("数据库没有数据!");}//循环读取数据并存入数组对象$dlogs;$i=0;while($row=mysql_fetch_array($rs)){$dlog['title']= $row["title"];$dlog['mtype']= $row["mtype"];$dlog['name']= $row["name"];$dlog['mfile']= $row["mfile"];$dlog['myear']= $row["myear"];$dlog['school']= $row["school"];$dlog['college']= $row["college"];$dlog['major']= $row["major"];$dlog['time']= $row["time"];$dlogs[$i++]=$dlog;}//以json格式返回html页面echo urldecode(json_encode($dlogs));?>