2019年5月7日更新這是寫的最新的一篇文章大家看這篇：https://www.jb51.net/article/157081.htm

介面比較醜，主要實現邏輯...

超級簡單的介面，表單，提交按鈕，搜尋結果展示區域...

下面是index.wxml

<!--index.wxml-->
<form bindsubmit="formSubmit">
<!--提交按鈕 -->
<input type="text" name="id" placeholder='輸入關鍵詞' style='border:1px solid #ccc;height:30px;'/>
<button formType="submit" class="btn">搜尋</button>  
</form>
<view>搜尋結果</view>
<view wx:for="{{re}}" wx:key="re">
 <view style='color:#f00;'>{{item.result}}</view>
 <view style='color:green;'>{{item.title}}</view>
</view>

*跟前端差不多，form表單要加一個bindsubmit="formSubmit"

接著就是index.js

//index.js
//獲取應用例項
const app = getApp()
Page({
 /**
  * 頁面的初始資料
  */
 data: {
  result:'',state:''
 },formSubmit: function (e) {
  var that = this;
  var formData = e.detail.value.id; //獲取表單所有name=id的值 
  wx.request({
   url: 'http://localhost/2018-5-24/search.php?id=' + formData,data: formData,header: { 'Content-Type': 'application/json' },success: function (res) {
    console.log(res.data)
    that.setData({
     re: res.data,})
    wx.showToast({
     title: '已提交',icon: 'success',duration: 2000
    })
   }
  })
 },})

url: 'http://localhost/2018-5-24/search.php?id=' + formData,

這個很容易理解

var that = this;
var formData = e.detail.value.id; 

先把表單name=id的值獲得，然後賦給formData這個變數
然後，在url進行拼接，用+號拼接這個變數即可...

然後，提交到介面，後端進行處理即可，後端處理後返回json格式的資料，然後通過

that.setData({
  re: res.data,})

進行列印在控制檯，你也可以渲染在index.wxml

為了方便大家研究，我把後端的php原始碼也貼出來。

search.php

<?php
header("Content-type:text/json;charset=utf8");
//定義引數
$id = $_GET["id"];
//表單驗證
if(empty($id)){
  echo "[{\"result\":\"表單為空...\"}]";
}else{
  //連線資料庫
  $con = mysql_connect("資料庫連結","賬號","密碼");
  //設定資料庫字符集 
  mysql_query("SET NAMES UTF8");
  //查詢資料庫
  mysql_select_db("資料庫名",$con);
  $result = mysql_query("SELECT * FROM test WHERE id like '%$id%'");
  $results = array();
  while($row = mysql_fetch_assoc($result))
  {
    $results[] = $row;
    // 將陣列轉成json格式
    echo json_encode($results);
  }
  //關閉資料庫連線
  mysql_close($con);
}
?>

*資料庫表名為test,裡面一共有兩個欄位，一個是id，一個是title

所以index.wxml裡面有兩個值

<view wx:for="{{re}}" wx:key="re">
 <view style='color:#f00;'>{{item.result}}</view>
 <view style='color:green;'>{{item.title}}</view>
</view>

wx:for="{{re}}"指的是迴圈陣列，在js程式碼中，我們把所有服務端取得的資料，存進了re的陣列

然後，{{item.result}}指的是服務端返回表單為空的結果。{{item.title}}返回的是搜尋結果，這個結合你的資料庫吧，你想展示什麼結果，你就把title改成你資料庫的相關欄位。

到此這篇關於微信小程式開發搜尋功能實現的文章就介紹到這了,更多相關小程式搜尋功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！