小程序搜索框提示功能以及简单的页面内容搜索的实现

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里。利用以下方法可以查     找是否有数据项与输入的内容匹配：
   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
      })
    }
  },