這篇文章給大家分享的是有關微信小程序如何實現(xiàn)搜索功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

開發(fā)需求

微信小程序已經是非常火了，而且學習也比較容易，但是對于初學者來說還是一件比較傷腦筋的事，接下來給大家分享一下小程序搜索的思路。

流程

1、表單（輸入框、提交按鈕、提交的name值)
2、接收表單數據（js獲取表單name=keyword的值）
3、通過wx.request向服務器后端發(fā)起請求查詢數據庫
4、返回JSON格式的數據給小程序，js解析渲染到小程序前端展示

界面

代碼

index.wxml

<!--標題-->
<viewclass="title">小程序搜索</view>

<!--搜索框view-->
<viewclass="search_con">

<!--表單-->
<formbindsubmit="formSubmit">
<!--記得設置name值，這樣JS才能接收name=keyword的值-->
<inputtype="text"name="keyword"class="search_input"placeholder='你要找什么呢？'/>
<buttonformType="submit"class="search_btn">搜索</button>
</form>
</view>

<!--搜索結果展示-->
<viewwx:for="{{re}}"wx:key="re"class="search_result">
<!--當提交空白表單的時候-->
<viewclass="empty">{{item.empty}}</view>
<!--當有搜索結果的時候-->
<viewclass="resname">{{item.resname}}</view>
<!--當查詢不到結果的時候-->
<viewclass="noresult">{{item.noresult}}</view>
</view>

index.js

其中里面的

http://localhost/search.php?keyword=

是服務器后端接口，用于接收小程序傳過去的關鍵詞的，下面會有這個后端PHP文件。

constapp=getApp()
Page({
data:{},

//執(zhí)行點擊事件
formSubmit:function(e){

//聲明當天執(zhí)行的
varthat=this;

//獲取表單所有name=keyword的值
varformData=e.detail.value.keyword;

//顯示搜索中的提示
wx.showLoading({
title:'搜索中',
icon:'loading'
})

//向搜索后端服務器發(fā)起請求
wx.request({

//URL
url:'http://localhost/search.php?keyword='+formData,

//發(fā)送的數據
data:formData,

//請求的數據時JSON格式
header:{
'Content-Type':'application/json'
},

//請求成功
success:function(res){

//控制臺打印（開發(fā)調試用）
console.log(res.data)

//把所有結果存進一個名為re的數組
that.setData({
re:res.data,
})

//搜索成功后，隱藏搜索中的提示
wx.hideLoading();
}
})
},
})

index.wxss

/*搜索樣式*/
.title{
text-align:center;
font-size:20px;
font-weight:bold;
}


.search_con{
width:80%;
margin:20pxauto;
}

.search_con.search_input{
border:1pxsolidrgb(214,211,211);
height:45px;
border-radius:100px;
font-size:17px;
padding-left:15px;/*此處要用padding-left才可以把光標往右移動15像素，不可以用text-indent*/
color:#333;
}

.search_con.search_btn{
margin-top:15px;
width:100%;
height:45px;
background:#56b273;
color:#fff;
border-radius:100px;
}

.search_result{
width:80%;
margin:10pxauto;
}


.search_result.empty{
text-align:center;
color:#f00;
font-size:15px;
}

.search_result.noresult{
text-align:center;
color:#666;
font-size:15px;
}

.search_result.resname{
text-align:left;
color:#333;
font-size:15px;
}

服務端

search.php

<?php
header('Content-Type:application/json');

//獲取表單數據
$keyword1=$_GET["keyword"];

//過濾表單空格
$keyword2=trim($keyword1);

//當表單提交空白數據時
if(empty($keyword2)){

//構建數組
$arr=array(
"empty"=>"表單不能為空"
);

//把數組轉換為json
$data=json_encode($arr);
echo"[$data]";

}else{

//過濾表單特殊字符
$replace=array('!','@','#','$','%','^','&','*','(',')','_','-','+','=','{','}','[',']',';',':','"','<','>','?','/','|');
$keyword3=str_replace($replace,'',$keyword2);

//連接數據庫
$con=mysql_connect("數據庫地址","數據庫賬號","數據庫密碼");
if(!$con){die('Couldnotconnect:'.mysql_error());}

mysql_select_db("數據庫名",$con);
mysql_query("SETNAMESUTF8");

//查詢數據庫
$result=mysql_query("SELECT*FROM表名WHERE需要查詢的字段like'%$keyword3%'ORDERBYIDDESC");
$results=array();
//查詢數據庫是否存在這條記錄
$exist=mysql_num_rows($result);
if($exist){
//遍歷輸出
while($row=mysql_fetch_assoc($result)){
$results[]=$row;
}

//輸出JSON
echojson_encode($results);

//當查詢無結果的時候
}else{

//構建數組
$arr=array(
"noresult"=>"暫無結果"
);

//把數組轉換為json
$data=json_encode($arr);
echo"[$data]";
}

//斷開數據庫連接
mysql_close($con);
}
?>

服務端也是非常簡單的，大家自己把服務端寫好一點，畢竟安全和效率是很重要的。

演示

總結

以上是生活随笔為你收集整理的微信小程序如何实现搜索功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。