# 搜索模塊 ### 搜索條  相關代碼如下： ``` <div class="aui-searchbar-wrap demo" id="search"> <div class="aui-searchbar aui-border-radius" tapmode onclick="doSearch()"> <i class="aui-iconfont aui-icon-search"></i> <div class="aui-searchbar-text">請輸入搜索內容</div> <div class="aui-searchbar-input"> <form action="javascript:search();"> <input type="text" placeholder="請輸入搜索內容" id="search-input"> </form> </div> <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i> </div> <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div> </div> <script type="text/javascript"> function doSearch(){ $api.addCls($api.dom(".aui-searchbar-wrap"),"focus"); $api.dom('.aui-searchbar-input input').focus(); } function cancelSearch(){ $api.removeCls($api.dom(".aui-searchbar-wrap.focus"),"focus"); $api.val($api.byId("search-input"),''); $api.dom('.aui-searchbar-input input').blur(); } function clearInput(){ $api.val($api.byId("search-input"),''); } function search(){ var content = $api.val($api.byId("search-input")); if(content){ api.alert({ title: '搜索提示', msg: '您輸入的內容為：'+content }); }else{ api.alert({ title: '搜索提示', msg: '您沒有輸入任何內容' }); } cancelSearch(); } </script> ```