SearchBar

搜索框。SearchBar UI 提供与WeLink规范一致的视图。 组件提供了搜索框、搜索结果、搜索按钮的样式。

    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search2 icon-16 icon-16-magnifier"></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">
                <i class="weui-icon-search2 icon-16 icon-16-magnifier"></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">
        <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>