小程序中搜索功能的实现方法（代码）

发布日期： 2018-09-07 阅读量： 作者： 网络

小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。

1.页面

<!--pages/review/search/search.wxml-->
<view class="page">
  <view class="weui-search-bar">
    <form bindsubmit="searchA" class="weui-search-bar__form" style="background-color:#eee;position:relative;">
      <view>
        <view class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" class="weui-search-bar__input" name="keyword" confirm-type="search" bindconfirm="searchB" 
          placeholder="搜索姓名、节目名、年份、老师名" value="{{inputVal}}" focus="{{inputShowed}}" bindfocus="" />
          <button class="search-btn" formType="submit">搜索</button>
        </view>
      </view>
    </form>
  </view>
  <block wx:if='{{isSearching}}'>
     <view>
      <view class="search-title">热门搜索</view>
      <view class="zj">
        <block wx:for='{{hotTag}}' wx:key='id'>
          <view class='tags' data-keyword='{{item}}' bindtap='searchHot'>{{item}}</view>
        </block>
      </view>
    </view>
  </block>
  <block wx:else>
    <block wx:if='{{searchData.length==0}}'>
      <view class='search-hint'>
        没有符合条件的选项
      </view>
    </block>
    <block wx:else>
      <view class='search-list'>
      <block wx:for='{{searchData}}' wx:key='id'>
    <navigator url="{{item.itemtype==2?'../videodetil/index?itemid='+item.id:'../material/index?itemid='+item.id}}" class="" style=''>
        <view class='search-item'>
          {{item.title}}
        </view>
      </navigator>
      </block>
      </view>
    </block>
  </block>
</view>

# 后端 # ios # android # 前端

上一篇: C++ 函数的修复指南：一步步解决调试问题

下一篇: 如何异步加载两个脚本文件并控制其执行顺序？

小程序中搜索功能的实现方法（代码）

随便看看