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()" 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()" 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  ，那么代表改元素包含搜索框的内容，反之不包含，改变样式，让其隐藏。