jquery-weui搜索框是一款非常實用的搜索插件，可在網頁中的搜索欄中實現自動提示、關鍵詞高亮、歷史記錄、聯想詞匹配等功能，使用戶搜索體驗更加優秀。此文將介紹jquery-weui搜索框的使用方法。

//引用jquery-weui的CSS和JS文件//HTML代碼
搜索
取消
自動提示結果
//JS代碼
var searchResult = $('.searchbar-result');
$('#searchInput').on('input', function() {
var val = $(this).val();
if(val) {
searchResult.show();
} else {
searchResult.hide();
}
}).on('focus', function() {
searchResult.show();
}).on('blur', function() {
setTimeout(function(){
searchResult.hide();
}, 200);
});
$('#searchClear').on('click', function() {
$('#searchInput').val('');
searchResult.hide();
});
$('#searchCancel').on('click', function() {
$('#searchInput').val('');
searchResult.hide();
$('#searchBar').removeClass('weui-search-bar_focusing');
});
//初始化搜索節點
var search = $('#searchBar');
search.searchBar({
searchList: ['搜索歷史', '搜索建議', '搜索結果'],
onSearch: function(value) {
console.log(value);
searchResult.html('
搜索 "'+ value +'" 的結果
');
},
onClear: function() {
searchResult.empty();
}
});

我們可以將搜索框的HTML和JS代碼復制到自己的項目中，然后修改searchList中的數組并且在onSearch回調函數中根據搜索關鍵字返回相應的結果，就可以實現一個非常實用的搜索功能了。