搜尋框實現，常用搜索，歷史搜尋等
阿新 • • 發佈：2018-12-19
1、實現功能
2、頁面佈局HTML
共三部分
（1）搜尋欄
input 框，右邊是一個a標籤，可以跳轉回前一頁面。之後寫元素用來放置歷史搜尋和常用搜索。
<form class="weui-search-bar__form" id="search-form"> <div class="weui-search-bar__box"> <i class="weui-icon-search"></i> <input type="search" class="weui-search-bar__input" id="searchInput" data-default="取快遞" placeholder="搜尋" required=""> <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> </div> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
分析：weui-icon-serach 就搜尋的那個圖示，接下來是Input框，後面a標籤，class為weui-icon-clear ，是第二張圖片中清除的那個圖示。id=searchCLear是用來清空搜尋框輸入內容的。
（2）歷史搜尋，常用搜索
<div class="search-prompt-wrapper" id="search-prompt"> <div class="weui-cells__title" id="historySearch">歷史搜尋</div> <div class="weui-cells" id="historySearchContent"> <div class="weui-cell"> <div id="search-prompt-history" class="content"></div> </div> </div> <div class="weui-cells__title"id="commonSearch">常用搜索</div> <div class="weui-cells"id="commonSearchContent"> <div class="weui-cell"> <div id="search-prompt-common" class="content"></div> </div> </div> </div>
這個部分用來放置歷史搜尋項和常用搜索項。
（3）搜尋結果
<li class="goods-wrapper"> <div class="content"> <div class="left-user" data-user=""> <div class="image"><img src=""></div> <div class="money"><span></span><img src="../img/task-item/money.png"></div> <div class="name"></div> </div> <div class="right-goods" data-id=""> <div class="top"><div class="title"></div><div class="type"></div></div> <div class="place"><span></span></div> <div class="describe"><p></p></div> <div class="bottom"> <div class="time"><span class="time-content"></span></div> <div class="operation"><span>搶單</span></div> </div> </div> </div> </li>
從後臺請求獲取搜尋結果，然後用資料填充shan上面框架。
3、程式碼分析：js程式碼如下：
/*初始化事件*/
function initEvent() {
/*獲取焦點*/
$(document).ready(function () {
$("#searchInput").focus();
});
/*點選軟鍵的搜尋按鈕*/
$("#search-form").submit(function () {
var $search_input = $("#searchInput");
var search = $search_input.val();
if(search.length == 0) search = $search_input.attr("data-default");
/* 啟動搜尋過程 */
beginSearch(search);
return false;
});
/*點選清空按鈕*/
$("#searchClear").click(function () {
$("#searchInput").val("");
$("#searchInput").focus();
/*更新搜尋*/
updatePrompt();
});
/*當內容改變時*/
$("#searchClear").change(function () {
var value = $("#searchInput").val();
if(value.length == 0) $("#searchClear").hide(); else $("#searchClear").show();
});
/*點選取消按鈕*/
$("#searchCancel").click(function () {
location.href="index.html";
});
}一開始獲得使用者的常用搜索和歷史搜尋。
$.get(ServerUrl + "search/popularHistory",function (data) {
if(data.status == Status.Status_OK){
initPromptCommon(data.data);
}else{
/*沒有常用搜索*/
}
});
/* 歷史搜尋 */
$.get(ServerUrl + "search/searchHistory",function (data) {
if(data.status == Status.Status_OK){
for(var prompt in data.data){
data.data[prompt] = data.data[prompt].searchRecord;
}
initPromptHistory(data.data);
}else{
/*沒有歷史搜尋*/
}
});
function initPromptCommon(prompts) {
initPrompt("#search-prompt-common", prompts);
/* 顯示常用搜索 */
$("#commonSearch").show();
$("#commonSearchContent").show();
}
function initPromptHistory(prompts) {
initPrompt("#search-prompt-history", prompts);
/* 顯示歷史搜尋 */
$("#historySearch").show();
$("#historySearchContent").show();
}
function initPrompt(elm_id, prompts) {
var $prompt = $(elm_id).empty();
for(var prompt in prompts){
$prompt.append('<div class="item" data-search="' + prompts[prompt] + '">' + prompts[prompt] + '</div>');
}
/*點選*/
$(elm_id + " .item").click(function () {
var search = $(this).attr("data-search");
beginSearch(search);
/*這樣使用者可以清空！*/
$("#searchInput").val(search);
});
}請求歷史介面，返回的資料格式如下：
執行搜尋
/* 獲取第page頁，並顯示*/
function getTaskByPage(callback) {
/*聯網獲取資料*/
$.get(ServerUrl + "search/search",{
keyWord: param.search,
page: param.page
},function (data) {
if(data.status == Status.Status_OK){
if(data.data.length == 0){ /* 表明已經沒有任務了 */
param.over = true;
if(param.page == 1){
$("#show-no-data").show();
}else{
$.toast("沒有更多了", "text");
}
}else{ /* 有任務 */
$("#show-no-data").hide();
showResult(data.data);
}
}else/* if(data.status == Status.Status_NULL_Result)*/{ /* 空結果 */ /*表明出現問題...*/
param.over = true;
if(param.page == 1){
$("#show-no-data").show();
}
}
/* 執行完成後的回掉 */
callback();
});
}4、實現百度模糊搜尋大概思路
一開始ul id=search，沒有li元素，li元素是在向伺服器請求後自動生成。
var searchModule=function(){
var $searchKey=$("#search");
var $searchBox=$("searchBox");
}
function bindData{
var searchKey= $searchKey.val();
$ajax({
url:""?wd=searchKey;
dataType:"Jsonp";
success:function(data){
//對請求回來的資料進行操作 類似於 callback;
var str="",
$each(data,function(index,item){
if(index<=3){
str+="<li>"+item"</li">;
}
})
$searchBox.html(str.stop().slideDown(300));
}
})
}
function init(){
$search.on("focus keyup",function(){
var val=$(this).val;
if(val.length>0){
bindData();
return;
}
$searchBox.html(str.stop().slideUp(300));
})
}