<div class="page">
|
<div class="page__hd">
|
<h1 class="page__title">SearchBar</h1>
|
<p class="page__desc">搜索栏</p>
|
</div>
|
<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">
|
<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">
|
<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 class="page__ft">
|
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
|
</div>
|
</div>
|
<script type="text/javascript">
|
$(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();
|
});
|
});
|
</script>
|
