首页 > 代码库 > weui 搜索框

weui 搜索框

2024-08-30 00:01:19   217人阅读

 

 点击搜索，会显示关键字取消按钮，输入文字，会在搜索框下，有相应的列表显示。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
        <!--医首信息自定义css-->
        <link rel="stylesheet" type="text/css" href="../css/jiaj.css" />
        <!--官网demo css-->
        <link rel="stylesheet" type="text/css" href="../css/example.css" />
        <!--weui css-->
        <link rel="stylesheet" type="text/css" href="../css/weui.css" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />
        <!--jQuery weui-->
        <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
       
        <title>历史答案</title>
    </head>ai

    <body ontouchstart>
        <!--页面切换必须要添加js_container-->
        <div class="container js_container">
            <div class="page">
                <div class="weui-jiaj-panel">
                    <div class="page__bd">
                        <!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->
                        <div class="weui-search-bar" id="searchBar">
                            <form class="weui-search-bar__form">
                                <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:" class="weui-icon-clear" id="searchClear"></a>
                                </div>
                                <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                                    <i class="weui-icon-search"></i>
                                    <span>搜索</span>
                                </label>
                            </form>
                            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                        </div>
                        <div class="weui-cells searchbar-result" id="searchResult" style="display: none;">
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--页面切换-->
        <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>
        <script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>
        <script src="../js/doctor/search.js"></script>
    </body>

</html>

所有的css都使用weui的样式。

JS:

    $(function(){
        var $searchBar = $(‘#searchBar‘),
            $searchResult = $(‘#searchResult‘),
            $searchText = $(‘#searchText‘),
            $searchInput = $(‘#searchInput‘),
            $searchClear = $(‘#searchClear‘),
            $searchCancel = $(‘#searchCancel‘);

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val(‘‘);
        }
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass(‘weui-search-bar_focusing‘);
            $searchText.show();
        }

        $searchText.on(‘click‘, function(){
            $searchBar.addClass(‘weui-search-bar_focusing‘);
            $searchInput.focus();
        });
        $searchInput
            .on(‘blur‘, function () {
                if(!this.value.length) cancelSearch();
            })
            .on(‘input‘, function(){
                if(this.value.length) {
                    $searchResult.show();
                } else {
                    $searchResult.hide();
                }
            })
        ;
        $searchClear.on(‘click‘, function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on(‘click‘, function(){
            cancelSearch();
            $searchInput.blur();
        });
    });

 

weui 搜索框


联系
我们