SearchBar

        <div class="page__bd">
            <div class="mx-search-bar" id="searchBar">
                <form class="mx-search-bar__form">
                    <div class="mx-search-bar__box">
                        <i class="mx-icon-search"></i>
                        <input type="search" class="mx-search-bar__input" id="searchInput" placeholder="搜索" required/>
                        <a href="javascript:" class="mx-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="mx-search-bar__label" id="searchText">
                        <i class="mx-icon-search"></i>
                        <span>搜索</span>
                    </label>
                </form>
                <a href="javascript:" class="mx-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
            <div class="mx-cells searchbar-result" id="searchResult">
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd mx-cell_primary">
                        <p>实时搜索文本</p>
                    </div>
                </div>
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd mx-cell_primary">
                        <p>实时搜索文本</p>
                    </div>
                </div>
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd mx-cell_primary">
                        <p>实时搜索文本</p>
                    </div>
                </div>
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd mx-cell_primary">
                        <p>实时搜索文本</p>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(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('mx-search-bar_focusing');
                    $searchText.show();
                }
                $searchText.on('click', function(){
                    $searchBar.addClass('mx-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();
                });
            });
        </script>