技術標籤：微信小程式小程式

1 效果

先來看一下效果

2 設計思路

2.1 顯示效果的設計

本示例包含兩種不同的搜尋框，第一種搜尋框是在最初狀態下顯示的搜尋框，它由一個輸入框input和一個表示“搜尋”的圖片組成。

第二種搜尋框是開始輸入時的搜尋框，它由一個輸入框input和一個表示“取消”的圖片組成。

我們可以設定一個標誌位focus來表示輸入框是否獲得了焦點，用於兩種形式的搜尋框的切換。初始狀態下focus=false，於是顯示第一種搜尋框。當我們在初始狀態下點選搜尋框時，會觸發獲得焦點事件，我們可以在輸入框的屬性中新增bindfocus，為其繫結一個事件處理函式。在事件處理函式中把focus設定為true，就切換到第二種輸入框來顯示。

在切換到第二種輸入框時，把我們所有的資料都放在一個scroll-view中顯示。當輸入內容時，觸發輸入事件，為輸入框新增bindinput屬性，在事件處理函式中查詢是否有資料項與輸入的內容匹配。如果有，則只顯示匹配的資料項。

當點選搜尋框右邊的圖片“取消”時，圖片的bindtap屬性則會呼叫相應的函式，在這個函式裡，我們把focus設定為false，這樣就會切換回第一種輸入框的狀態，我們也可以利用focus這個標誌位來控制scroll-view是否顯示，都是用到wx:if="{{focus}}"。

2.2 文字搜尋的實現

如果我們的資料並不是很多，那麼就可以存放在頁面的js檔案中的data裡。利用以下方法可以查詢是否有資料項與輸入的內容匹配：

 list: [{'name':'連花清瘟膠囊','num':'1盒'},{'name':'感冒靈顆粒','num':'1盒'},{'name':'維生素C','num':'2瓶'},{'name':'蒲地藍消炎片','num':'3盒'}],	//這是搜尋到的結果
 list2: [{'name':'連花清瘟膠囊','num':'1盒'},{'name':'感冒靈顆粒','num':'1盒'},{'name':'維生素C','num':'2瓶'},{'name':'蒲地藍消炎片','num':'3盒'}],	//這是所有可供查詢的記錄

在js中的查詢函式：

 	var list =
 
 this.data.list2;		//先把所有資料項儲存
    var list2 = [];		//定義一個數組
    //迴圈取每個資料項的主鍵，即藥品名name
    for(var i=0;i<list.length;i++){
      var string = list[i].name;
      //查詢name是否包含輸入框內輸入的關鍵詞，如果有就把該資料項裝進list2陣列
      if(string.indexOf(e.detail.value) >= 0){
        list2.push(list[i]);
      }
    }
    //到這裡list2就是與搜尋結果匹配的資料項了
    //如果輸入的關鍵詞為空就載入原來的全部資料，不是空就載入搜尋到的資料
    if(e.detail.value == ""){
      //載入全部
      this.setData({
        list: list
      })
    } else {
      this.setData({
        list: list2
      })
    }

3 附程式碼

wxml：

<!-- 一般情況下的搜尋框顯示 -->
<view wx:if="{{!focus}}" class='search'>
  <image class="search_image" src='/icon/search.png'></image>
  <input type='text' placeholder='搜尋藥品' placeholder-class="center" confirm-type='search' bindfocus="focusHandler"></input>
</view>
<!-- 獲得焦點時的搜尋框，多一個取消按鈕 -->
<view wx:if="{{focus}}" class='search'>
  <input class="search_input" type='text' placeholder='搜尋藥品' confirm-type='search' value="{{inputValue}}"  bindinput='query'>
  </input>
  <image class="search_image" src='/icon/cancel.png' bindtap='cancelHandler'></image>
</view>

  <!-- 搜尋結果顯示框 -->
  <scroll-view wx:if="{{focus}}" class="scrollview" scroll-y="true">
  <view wx:for="{{list}}" wx:key="name">
    <view class="scrollItem">
    <text class="font1" space="nbsp">   {{item.name}}</text>
    <text class="font2"space="nbsp">{{item.num}}   </text>
    </view>
  </view>
  </scroll-view>

js：

Page({

  /**
   * 頁面的初始資料
   */
  data: {
  list: [{'name':'連花清瘟膠囊','num':'1盒'},{'name':'感冒靈顆粒','num':'1盒'},{'name':'維生素C','num':'2瓶'},{'name':'蒲地藍消炎片','num':'3盒'}],	//這是搜尋到的結果
  list2: [{'name':'連花清瘟膠囊','num':'1盒'},{'name':'感冒靈顆粒','num':'1盒'},{'name':'維生素C','num':'2瓶'},{'name':'蒲地藍消炎片','num':'3盒'}],	//這是所有可供查詢的記錄
  focus:false,  //控制是否顯示帶取消按鈕的搜尋框
  inputValue:""
  },
  focusHandler(e){
    this.setData({focus:true});
  },
  cancelHandler(e)
  {
    this.setData({focus:false});
  },
  query(e){
   
    this.setData({
      inputValue: e.detail.value
  })  //首先回顯輸入的字串
    //實現搜尋的功能
    var list = this.data.list2;		//先把第二條json存起來
    var list2 = [];		//定義一個數組
    //迴圈去取資料
    for(var i=0;i<list.length;i++){
      var string = list[i].name;
      //查詢json裡的name是否包含搜尋的關鍵詞，如果有就把他裝進list2陣列
      if(string.indexOf(e.detail.value) >= 0){
        list2.push(list[i]);
      }
    }
    //到這裡list2就已經是你查出的資料
    //如果輸入的關鍵詞為空就載入原來的全部資料，不是空就載入搜尋到的資料
    if(e.detail.value == ""){
      //載入全部
      this.setData({
        list: list
      })
    } else {
      this.setData({
        list: list2
      })
    }
  },