weui的頁面内搜尋功能實作demo

基于公司微信公衆号開發的需要，寫了一個頁面内簡單搜尋功能的demo

下面是html：

<div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" onkeydown="if(event.keyCode==13) return false;">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput"  placeholder="搜尋"
                   required="">
            <a href="javascript:clear()" target="_blank" rel="external nofollow"  class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span>請輸入你想要檢視的關鍵字</span>
        </label>
    </form>
    <a href="javascript:cancel()" target="_blank" rel="external nofollow"  class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
           

下面是被搜尋的主體：

<div id="body_fat" class="weui-cell" onclick="javascript:clickTo(this)">
        <div class="weui-cell__hd"><img src="images/bodyfat.png"></div>
        <div class="weui-cell__bd">
            <p>體脂</p>
        </div>
        <div class="weui-cell__ft"><img src="images/right.png"></div>
    </div>
    <div id="pressure" class="weui-cell" onclick="javascript:clickTo(this)">
        <div class="weui-cell__hd"><img src="images/pressure.png"></div>
        <div class="weui-cell__bd">
            <p>血壓</p>
        </div>
        <div class="weui-cell__ft"><img src="images/right.png"></div>
    </div>
           

js代碼實作:三個函數分别為綁定change事件，取消搜尋，和clear（搜尋框裡的 × ）事件

$('#searchInput').bind('input propertychange', function() {
        var text = $("#searchInput").val();
        var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (reg.test(text)) {
            $('.weui-cell').each(function () {
                var $self = $(this);
                var flag = $self.text().search(text)
                if (flag > -1) {
                    $self.css("display", "");

                } else {
                    $self.css("display", "none");

                }
            });
        }
    });

 function cancel(){
     $('.weui-cell').css("display","")

 }
 
   function clear(){
        $('#searchInput').val('')
        $('.weui-cell').css("display", "")
    }
           

原理是輸入框觸發change事件，監聽輸入框内容，周遊被搜尋的主體，如果   $self.text().search(text)  的值大于-1  ，那麼代表改元素包含搜尋框的内容，反之不包含，改變樣式，讓其隐藏。