本文主要透過仿照淘寶搜尋關鍵字後下拉相關產品搜尋樣子的製作,深度分析了JSsearch的用法,一起跟著小編學習下。
我們先給出本次關於JSsearch程式的相關原始碼:https://gitee.com/skyogo/JSsearch
我們下載JSsearch1.0 Community版本
下載好了之後我們再下載一個類似淘寶的購物頁面
然後,我們打開這個頁面,會發現是這樣的
此時我們關掉頁面,將我們的JSsearch.js拷貝一份到淘寶頁面的根目錄的js資料夾下面
拷貝完了之後,我們在html頁面中引入它(在body最底部寫)
<script src="js/JSsearch.js"></script> <script> </script>
然後我們在上面的第76行(input標記下面)寫上這段程式碼
<p id="search-recommend"> 没有搜索结果 </p>
然後我們打開css/index.css文件,在裡面寫上這段css樣式表
#search-recommend{ height: 40px; width: 580px; position: absolute; top: 110px; border: 1px gray solid; padding-left: 20px; box-sizing: border-box; padding-top: 11px; font-size: 15px; cursor: pointer; background: white; }
運行一下html頁面,發現搜尋框下面多出了一個框
至此,我們的html和css程式碼就寫完了,接下來,我們來寫js程式碼
我們現在將頁面關閉,打開開發工具,在index.html裡面找到大約是2754行的3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤,那麼我們現在就要在裡面寫入我們的查詢程式碼
首先,我們寫入這段程式碼:(重複取得輸入框裡面的值)
var lastValue = document.getElementById("search-in").value; setInterval(function(){ },10)
然後,我們在var的下面寫入判斷語句,判斷是否輸入框的值改變了
if(lastValue != document.getElementById("search-in").value){ }
接著,我們在if裡面寫入:
lastValue = document.getElementById("search-in").value;
這段話,就是說重複判斷,如果輸入框的值改變了,那麼就重新賦值
然後,我們再寫在下面:
if(lastValue==null||lastValue==""){ document.getElementById("search-recommend").innerHTML = "没有搜索结果"; }else{ }
這段話,就是判斷如果輸入框是現在的值為空,那麼就讓他顯示「沒有搜尋結果」
接著,我們在else裡面寫入:
var newItemList = JSsearchByKeyWord(itemList,lastValue); if(newItemList[0] == undefined){ document.getElementById("search-recommend").innerHTML = "没有搜索结果"; }else{ }
這時,我們就呼叫了JSsearch的用關鍵字查找的方法,哦,對了,我們還沒寫itemList這個數組
這時把遊標移到setInterval的上面一行,寫上:
var itemList = ["光能表","情侣表","日韩腕表","手表放心淘","瑞士表","陶瓷表","电子表","欧米茄","钢带表","皮带表","镂空机械表","斯沃琪","天梭","运动表","卡西欧","国表","时尚表","女表","儿童表","学生表","浪琴"];
itemList是我們所有的商品集合
現在再把遊標移回去,移到else裡面,寫上:
document.getElementById("search-recommend").innerHTML = newItemList[0];
此時,我們再打開html文件,再輸入框裡面輸入內容,就會發現已經有聯想了!
當然,這還只是個雛形,我們還有一個BUG需要解決,就是當你輸入一個多個字串都包含的字元後,他並不一定推薦你想的那個,這點JSsearch已經幫我們想好了,我在這裡就不再寫了,如果想解決這個BUG,可以參考JSsearch的說明文檔自行解決!
相關推薦:
#JavaScript中indexOf與search的差異詳解
#以上是仿淘寶JSsearch搜尋下拉深度用法解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!