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

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

我們下載JSsearch1.0 Community版本

下載好了之后我們?cè)傧螺d一個(gè)類似淘寶的購(gòu)物頁(yè)面

然后，我們打開(kāi)這個(gè)頁(yè)面，會(huì)發(fā)現(xiàn)是這樣的

此時(shí)我們關(guān)掉頁(yè)面，將我們的JSsearch.js拷貝一份到淘寶頁(yè)面的根目錄的js文件夾下面

拷貝完了之后，我們?cè)趆tml頁(yè)面中引入它（在body最底部寫）

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

然后我們?cè)谏厦娴牡?6行（input標(biāo)記下面）里寫上這段代碼

<p id="search-recommend">
 沒(méi)有搜索結(jié)果
</p>

然后我們打開(kāi)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;
}

運(yùn)行一下html頁(yè)面，發(fā)現(xiàn)搜索框下面多出了一個(gè)框

至此，我們的html和css代碼就寫完了，接下來(lái)，我們來(lái)寫js代碼

我們現(xiàn)在將頁(yè)面關(guān)閉，打開(kāi)開(kāi)發(fā)工具，在index.html里面找到大約是2754行的<script>標(biāo)簽，那么我們現(xiàn)在就要在里面寫入我們的查詢代碼

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

var lastValue = document.getElementById("search-in").value;
setInterval(function(){ 
},10)

然后，我們?cè)趘ar的下面寫入判斷語(yǔ)句，判斷是否輸入框的值改變了

if(lastValue != document.getElementById("search-in").value){ 
}

接著，我們?cè)趇f里面寫入：

lastValue = document.getElementById("search-in").value;

這段話，就是說(shuō)重復(fù)判斷，如果輸入框的值改變了，那么就重新賦值

然后，我們?cè)僭谙旅鎸懭耄?/p>

if(lastValue==null||lastValue==""){
 document.getElementById("search-recommend").innerHTML = "沒(méi)有搜索結(jié)果";
}else{
}

這段話，就是判斷如果輸入框現(xiàn)在的值為空，那么就讓他顯示“沒(méi)有搜索結(jié)果”

接著，我們?cè)趀lse里面寫入：

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
 document.getElementById("search-recommend").innerHTML = "沒(méi)有搜索結(jié)果";
}else{ 
}

這時(shí)，我們就調(diào)用了JSsearch的用關(guān)鍵詞查找的方法，哦，對(duì)了，我們還沒(méi)寫itemList這個(gè)數(shù)組

這時(shí)把光標(biāo)移到setInterval的上面一行，寫上：

var itemList = ["光能表","情侶表","日韓腕表","手表放心淘","瑞士表","陶瓷表","電子表","歐米茄","鋼帶表","皮帶表","鏤空機(jī)械表","斯沃琪","天梭","運(yùn)動(dòng)表","卡西歐","國(guó)表","時(shí)尚表","女表","兒童表","學(xué)生表","浪琴"];

itemList是我們所有的商品合集

現(xiàn)在再把光標(biāo)移回去，移到else里面，寫上：

document.getElementById("search-recommend").innerHTML = newItemList[0];

此時(shí)，我們?cè)俅蜷_(kāi)html文件，再輸入框里面輸入內(nèi)容，就會(huì)發(fā)現(xiàn)已經(jīng)有聯(lián)想了！

當(dāng)然，這還只是個(gè)雛形，我們還有一個(gè)BUG需要解決，就是當(dāng)你輸入一個(gè)多個(gè)字符串都含有的字符后，他并不一定推薦你想的那個(gè)，這點(diǎn)JSsearch已經(jīng)幫我們想好了，我在這里就不再寫了，如果想解決這個(gè)BUG，可以參考JSsearch的說(shuō)明文檔自行解決！

相關(guān)推薦：

js字符串indexof與search區(qū)別詳解

JavaScript中indexOf與search的區(qū)別詳解

有關(guān)search的文章推薦10篇

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com