點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

仿淘寶JSsearch搜索下拉深度用法

來源：懂視網責編：小采時間：2020-11-27 22:21:32

仿淘寶JSsearch搜索下拉深度用法

仿淘寶JSsearch搜索下拉深度用法:我們首先給出本次關于JSsearch程序的相關源碼：https://gitee.com/skyogo/JSsearch 我們下載JSsearch1.0 Community版本下載好了之后我們再下載一個類似淘寶的購物頁面然后，我們打開這個頁面，會發現是這樣的此時我們關掉頁面，將我們的JSsearc

推薦度：

點擊下載本文 文檔為doc格式

導讀仿淘寶JSsearch搜索下拉深度用法:我們首先給出本次關于JSsearch程序的相關源碼：https://gitee.com/skyogo/JSsearch 我們下載JSsearch1.0 Community版本下載好了之后我們再下載一個類似淘寶的購物頁面然后，我們打開這個頁面，會發現是這樣的此時我們關掉頁面，將我們的JSsearc

我們首先給出本次關于JSsearch程序的相關源碼：https://gitee.com/skyogo/JSsearch

我們下載JSsearch1.0 Community版本

下載好了之后我們再下載一個類似淘寶的購物頁面

然后，我們打開這個頁面，會發現是這樣的

此時我們關掉頁面，將我們的JSsearch.js拷貝一份到淘寶頁面的根目錄的js文件夾下面

拷貝完了之后，我們在html頁面中引入它（在body最底部寫）

<script src="js/JSsearch.js"></script>
<script>
</script>

然后我們在上面的第76行（input標記下面）里寫上這段代碼

<div id="search-recommend">
 沒有搜索結果
</div>

然后我們打開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>標簽，那么我們現在就要在里面寫入我們的查詢代碼

首先，我們寫入這段代碼：（重復獲取輸入框里面的值）

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

仿淘寶JSsearch搜索下拉深度用法

推薦度：

點擊下載本文 文檔為doc格式

標簽：搜索使用用法

熱門焦點

仿淘寶JSsearch搜索下拉深度用法

仿淘寶JSsearch搜索下拉深度用法

仿淘寶JSsearch搜索下拉深度用法

最新推薦

猜你喜歡

熱門推薦