searchBar 搜索栏,类似于微信原生的搜索栏,应用于常见的搜索场景。

    image

    image

    详细的代码结构如下:

    1. <div class="weui-search-bar" id="search_bar">
    2. <form class="weui-search-bar__form">
    3. <div class="weui-search-bar__box">
    4. <i class="weui-icon-search"></i>
    5. <input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" />
    6. <a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
    7. </div>
    8. <label for="search_input" class="weui-search-bar__label" id="search_text">
    9. <i class="weui-icon-search"></i>
    10. <span>搜索</span>
    11. </label>
    12. </form>
    13. <a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a>
    14. </div>
    15. <div class="weui-cells weui-cells_access search_show" id="search_show">
    16. <div class="weui-cell">
    17. <div class="weui-cell__bd weui-cell_primary">
    18. <p>实时搜索文本</p>
    19. </div>
    20. </div>
    21. <div class="weui-cell">
    22. <div class="weui-cell__bd weui-cell_primary">
    23. <p>实时搜索文本</p>
    24. </div>
    25. </div>
    26. <div class="weui-cell">
    27. <div class="weui-cell__bd weui-cell_primary">
    28. <p>实时搜索文本</p>
    29. </div>
    30. </div>
    31. <div class="weui-cell">
    32. <div class="weui-cell__bd weui-cell_primary">
    33. <p>实时搜索文本</p>
    34. </div>
    35. </div>
    36. </div>

    原文: https://github.com/Tencent/weui/wiki/SearchBar