仿淘寶的JSsearch搜尋（詳細教學）

本篇文章透過仿照淘寶搜尋關鍵字後下拉相關產品搜尋樣子的製作，深度分析了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行的<script>標籤，那麼我們現在就要在裡面寫入我們的查詢程式碼</script>

首先，我們寫入這段程式碼：（重複取得輸入框裡面的值）

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的說明文檔自行解決！

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

詳細說明在vue2中使用axios解決http請求出現的問題（詳細教學）

透過在vue在專案中引入highcharts圖表的方法有哪些？

在Angular中@HostBinding()和@HostListener()用法（詳細教學）

##如何處理vue渲染前的顯示面問題（詳細教學）

透過在vue專案中使用ueditor（詳細教學）

透過在vue專案中引入noVNC遠端桌面的方法步驟有哪些

以上是仿淘寶的JSsearch搜尋（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！