仿淘寶JSsearch搜索下拉深度用法
我們首先給出本次關(guān)于JSsearch程序的相關(guān)源碼：https://gitee.com/skyogo/JSsearch
我們下載JSsearch1.0 Community版本
下載好了之后我們再下載一個類似淘寶的購物頁面
然后，我們打開這個頁面，會發(fā)現(xiàn)是這樣的
此時我們關(guān)掉頁面，將我們的JSsearch.js拷貝一份到淘寶頁面的根目錄的js文件夾下面
拷貝完了之后，我們在html頁面中引入它（在body最底部寫）
<script src="js/JSsearch.js"></script> <script> </script>
然后我們在上面的第76行（input標(biāo)記下面）里寫上這段代碼
<div id="search-recommend"> 沒有搜索結(jié)果 </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頁面，發(fā)現(xiàn)搜索框下面多出了一個框
至此，我們的html和css代碼就寫完了，接下來，我們來寫js代碼
我們現(xiàn)在將頁面關(guān)閉，打開開發(fā)工具，在index.html里面找到大約是2754行的<script>標(biāo)簽，那么我們現(xiàn)在就要在里面寫入我們的查詢代碼
首先，我們寫入這段代碼：（重復(fù)獲取輸入框里面的值）
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;
這段話，就是說重復(fù)判斷，如果輸入框的值改變了，那么就重新賦值
然后，我們再在下面寫入：
if(lastValue==null||lastValue==""){
document.getElementById("search-recommend").innerHTML = "沒有搜索結(jié)果";
}else{
}
這段話，就是判斷如果輸入框現(xiàn)在的值為空，那么就讓他顯示“沒有搜索結(jié)果”
接著，我們在else里面寫入：
var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
document.getElementById("search-recommend").innerHTML = "沒有搜索結(jié)果";
}else{
}
這時，我們就調(diào)用了JSsearch的用關(guān)鍵詞查找的方法，哦，對了，我們還沒寫itemList這個數(shù)組
這時把光標(biāo)移到setInterval的上面一行，寫上：
var itemList = ["光能表","情侶表","日韓腕表","手表放心淘","瑞士表","陶瓷表","電子表","歐米茄","鋼帶表","皮帶表","鏤空機械表","斯沃琪","天梭","運動表","卡西歐","國表","時尚表","女表","兒童表","學(xué)生表","浪琴"];
itemList是我們所有的商品合集
現(xiàn)在再把光標(biāo)移回去，移到else里面，寫上：
document.getElementById("search-recommend").innerHTML = newItemList[0];
此時，我們再打開html文件，再輸入框里面輸入內(nèi)容，就會發(fā)現(xiàn)已經(jīng)有聯(lián)想了！
當(dāng)然，這還只是個雛形，我們還有一個BUG需要解決，就是當(dāng)你輸入一個多個字符串都含有的字符后，他并不一定推薦你想的那個，這點JSsearch已經(jīng)幫我們想好了，我在這里就不再寫了，如果想解決這個BUG，可以參考JSsearch的說明文檔自行解決！
相關(guān)文章
這篇文章主要介紹了AutoJs實現(xiàn)刷寶短視頻的思路詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實例形式分析了Map的功能、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-03-03
JavaScript預(yù)解析及相關(guān)技巧分析
這篇文章主要介紹了JavaScript預(yù)解析及相關(guān)技巧,結(jié)合實例形式分析了JavaScript與解析的原理,步驟與相關(guān)技巧,需要的朋友可以參考下2016-04-04
MVVM模式中ViewModel和View、Model有什么區(qū)別？
這篇文章主要介紹了MVVM模式中ViewModel和View、Model有什么區(qū)別？本文分別解釋了它們的功能和作用,然后總結(jié)了它之間的區(qū)別,需要的朋友可以參考下2015-06-06
霧化效果是3D的比較常見的特性，在游戲中見到的煙霧、爆炸火焰以及白云等效果都是霧化的結(jié)果，下面這篇文章主要給大家介紹了關(guān)于Three.js如何實現(xiàn)霧化效果的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
微信小程序--獲取用戶地理位置名稱(無須用戶授權(quán))的方法
這篇文章主要介紹了微信小程序-獲取用戶地理位置名稱(無須用戶授權(quán))的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript之大字符串的連接的StringBuffer 類
javascript之大字符串的連接的StringBuffer 類...2007-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)百度搜索框關(guān)鍵字推薦，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了JavaScript 數(shù)組常見操作技巧，上一篇文章已經(jīng)給大家分享了（一），下面緊接上一篇文章分享下面技巧，需要的小伙伴可以參考一下2022-02-02
匯編語言還是在大學(xué)的時候?qū)W的，匯編語言有個特點是語句短、條數(shù)多，很難可以把全部指令都背熟。本文就來用JavaScript編寫一個8086匯編指令查詢工具，希望對大家有所幫助2023-02-02