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

開(kāi)發(fā)需求

微信小程序已經(jīng)是非常火了，而且學(xué)習(xí)也比較容易，但是對(duì)于初學(xué)者來(lái)說(shuō)還是一件比較傷腦筋的事，接下來(lái)給大家分享一下小程序搜索的思路。

流程

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

界面

代碼

index.wxml

<!--標(biāo)題-->
<viewclass="title">小程序搜索</view>

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

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

<!--搜索結(jié)果展示-->
<viewwx:for="{{re}}"wx:key="re"class="search_result">
<!--當(dāng)提交空白表單的時(shí)候-->
<viewclass="empty">{{item.empty}}</view>
<!--當(dāng)有搜索結(jié)果的時(shí)候-->
<viewclass="resname">{{item.resname}}</view>
<!--當(dāng)查詢(xún)不到結(jié)果的時(shí)候-->
<viewclass="noresult">{{item.noresult}}</view>
</view>

index.js

其中里面的

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

是服務(wù)器后端接口，用于接收小程序傳過(guò)去的關(guān)鍵詞的，下面會(huì)有這個(gè)后端PHP文件。

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

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

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

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

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

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

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

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

//請(qǐng)求的數(shù)據(jù)時(shí)JSON格式
header:{
'Content-Type':'application/json'
},

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

//控制臺(tái)打印（開(kāi)發(fā)調(diào)試用）
console.log(res.data)

//把所有結(jié)果存進(jìn)一個(gè)名為re的數(shù)組
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才可以把光標(biāo)往右移動(dòng)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;
}

服務(wù)端

search.php

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

//獲取表單數(shù)據(jù)
$keyword1=$_GET["keyword"];

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

//當(dāng)表單提交空白數(shù)據(jù)時(shí)
if(empty($keyword2)){

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

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

}else{

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

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

mysql_select_db("數(shù)據(jù)庫(kù)名",$con);
mysql_query("SETNAMESUTF8");

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

//輸出JSON
echojson_encode($results);

//當(dāng)查詢(xún)無(wú)結(jié)果的時(shí)候
}else{

//構(gòu)建數(shù)組
$arr=array(
"noresult"=>"暫無(wú)結(jié)果"
);

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

//斷開(kāi)數(shù)據(jù)庫(kù)連接
mysql_close($con);
}
?>

服務(wù)端也是非常簡(jiǎn)單的，大家自己把服務(wù)端寫(xiě)好一點(diǎn)，畢竟安全和效率是很重要的。

演示

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。