实现Actionsheet关键字搜索的思路

发布日期：2019-07-09 14:53:37

发现Actionsheet需要实现关键字搜索的思路，所以整了整思路，做了下面这个demo




<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>  
<link rel="stylesheet" href="css/weui.css"/>
<link rel="stylesheet" href="css/weuix.css"/>
<script src="js/zepto.min.js"></script>
<script src="js/zepto.weui.js"></script>
</head>
<body>


<a z-data-value="-1" id="showIOSActionSheet" style="margin:4px;padding:0;color:#FF6666;font-size:14px;border:1px solid #FF6666;height:28px;line-height:28px" class="weui-btn weui-btn_plain-primary">请选择商品类别</a>
<!--商品分类-->
<div>
        <div class="weui-mask" id="iosMask" style="display: none"></div>
        
        <div class="weui-actionsheet" id="iosActionsheet">
            <div class="weui-actionsheet__title">
                <p class="weui-actionsheet__title-text">请选择商品类别</p>
            </div>
            <div class="weui-flex" style="height:38px">
                <div class="weui-flex__item" style="-webkit-box-flex:3;-webkit-flex:3;flex:3;padding-top:4px;padding-left:5px">
                    <input id="tbSearchKey" class="weui-input" placeholder="请输入关键字"/>
                </div>
                <div class="weui-flex__item" style="padding-top:4px">
                    <a onclick="searchkey()" href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" style="width: 90%; padding: 0">查询</a>
                </div>
            </div>
            <div class="weui-actionsheet__menu" id="iosActionsheetList" style="height:300px;overflow-y:auto; overflow-x:hidden;">
            </div>
            <div class="weui-actionsheet__action">
                <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
            </div>
        </div>
</div>
<!--商品分类end-->
</body>
</html>
<script>
    $(function () {
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');
        var $iosActionsheetList = $('#iosActionsheetList');


        function hideActionSheet() {
            $('#tbSearchKey').val()
            $("#iosActionsheetList div").css('display', 'block');


            $iosActionsheet.removeClass('weui-actionsheet_toggle');
            $iosMask.fadeOut(200);
        }


        $iosMask.on('click', hideActionSheet);
        $('#iosActionsheetCancel').on('click', hideActionSheet);


        $("#showIOSActionSheet").on("click", function () {
            $('#tbSearchKey').val('');
            $('#iosActionsheetList').scrollTop(0);
            $iosActionsheet.addClass('weui-actionsheet_toggle');
            $iosMask.fadeIn(200);
        });


        var html = '';
        for (var i = 1; i < 200; i++) {
            var text = '类别' + i;
            html = html + "<div id=\"sel-item" + i+ "\" onclick=\"selKind('" + text + "'," + i + ")\" class=\"weui-actionsheet__cell\">" + text + "</div>";
        }
        $iosActionsheetList.html(html);
    });


    function selKind(text, val) {
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');
        var $showIOSActionSheet = $('#showIOSActionSheet');


        $showIOSActionSheet.attr('z-data-value', val);
        $showIOSActionSheet.text(text);


        $('#tbSearchKey').val('');
        $("#iosActionsheetList div").css('display', 'block');


        $iosActionsheet.removeClass('weui-actionsheet_toggle');
        $iosMask.fadeOut(200);
    }


    function searchkey() {
        var key = $('#tbSearchKey').val();
        if (key == '') {
            $("#iosActionsheetList div").css('display', 'block');
            return;
        }
        var items = $('#iosActionsheetList div');
        for (var i = 0; i < items.length; i++) {
            var el = items[i];        
            var text = el.innerText.toString();
            if (text.indexOf(key) == -1) {
                $('#' + el.id).css('display', 'none');
            }
            else {
                $('#' + el.id).css('display', 'block');
            }
        }
    }


</script>