<!-- 標題 --><view class="title">小程序搜索</view><!-- 搜索框view --><view class="search_con"><!-- 表單 --> <form bindsubmit="formSubmit"> <!-- 記得設置name值，這樣JS才能接收name=keyword的值 -->  <input type="text" name="keyword" class="search_input" placeholder='你要找什么呢？'/>  <button formType="submit" class="search_btn">搜索</button>   </form></view><!-- 搜索結(jié)果展示 --><view wx:for="{{re}}" wx:key="re" class="search_result"><!-- 當提交空白表單的時候 --> <view class="empty">{{item.empty}}</view> <!-- 當有搜索結(jié)果的時候 --> <view class="resname">{{item.resname}}</view> <!-- 當查詢不到結(jié)果的時候 --> <view class="noresult">{{item.noresult}}</view></view>

const app = getApp()Page({ data: {}, //執(zhí)行點擊事件 formSubmit: function (e) {  //聲明當天執(zhí)行的  var that = this;  //獲取表單所有name=keyword的值  var formData = e.detail.value.keyword;  //顯示搜索中的提示  wx.showLoading({   title: '搜索中',   icon: 'loading'  })  //向搜索后端服務器發(fā)起請求  wx.request({   //URL   url: 'http://localhost/search.php?keyword=' + formData,   //發(fā)送的數(shù)據(jù)   data: formData,   //請求的數(shù)據(jù)時JSON格式   header: {    'Content-Type':'application/json'   },   //請求成功   success: function (res) {    //控制臺打印（開發(fā)調(diào)試用）    console.log(res.data)    //把所有結(jié)果存進一個名為re的數(shù)組    that.setData({     re: res.data,    })    //搜索成功后，隱藏搜索中的提示    wx.hideLoading();   }  }) },})

/* 搜索樣式 */.title{ text-align: center; font-size: 20px; font-weight: bold;}.search_con{ width: 80%; margin:20px auto;}.search_con .search_input{ border: 1px solid rgb(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:10px auto;}.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;}

<?phpheader('Content-Type:application/json');//獲取表單數(shù)據(jù)$keyword1 = $_GET["keyword"];//過濾表單空格$keyword2 = trim($keyword1);//當表單提交空白數(shù)據(jù)時if(empty($keyword2)){    //構(gòu)建數(shù)組  $arr = array(      "empty" => "表單不能為空"    );  //把數(shù)組轉(zhuǎn)換為json  $data = json_encode($arr);  echo "[$data]";}else{//過濾表單特殊字符$replace = array('!','@','#','$','%','^','&','*','(',')','_','-','+','=','{','}','[',']',';',':','"','<','>','?','/','|');$keyword3 = str_replace($replace, '', $keyword2);// 連接數(shù)據(jù)庫$con = mysql_connect("數(shù)據(jù)庫地址","數(shù)據(jù)庫賬號","數(shù)據(jù)庫密碼");if (!$con){die('Could not connect: ' . mysql_error());}mysql_select_db("數(shù)據(jù)庫名", $con);mysql_query("SET NAMES UTF8");//查詢數(shù)據(jù)庫$result = mysql_query("SELECT * FROM 表名 WHERE 需要查詢的字段 like '%$keyword3%' ORDER BY ID DESC");$results = array();//查詢數(shù)據(jù)庫是否存在這條記錄$exist = mysql_num_rows($result);if ($exist) {  //遍歷輸出  while ($row = mysql_fetch_assoc($result)){    $results[] = $row;    }  //輸出JSON  echo json_encode($results);  //當查詢無結(jié)果的時候  }else{    //構(gòu)建數(shù)組    $arr = array(      "noresult" => "暫無結(jié)果"    );    //把數(shù)組轉(zhuǎn)換為json    $data = json_encode($arr);    echo "[$data]";}//斷開數(shù)據(jù)庫連接mysql_close($con);}?>