JSsearch實現在購物網站輸入後推薦聯想的效果
在篇文章裡,我們主要講解一下JSsearch如何完成推薦的功能
首先,登陸碼雲下載JSsearch:
https://gitee.com/skyogo/JSsearch
我們下載JSsearch1.0 Community版本
下載好了之後我們再下載一個類似淘寶的購物頁面(頁面由達內童程製作,感謝他們)
連結:https://pan.baidu.com/s/1eSYCWee 密碼:ptq2
然後,我們開啟這個頁面,會發現是這樣的
此時我們關掉頁面,將我們的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的說明文件自行解決!
最後,再重新說一遍JSsearch的連結:(開源中國)
https://www.oschina.net/p/jssearch
原文釋出時間為:2018年01月14日
原文作者: Skyogo
本文來源:開源中國 如需轉載請聯絡原作者
相關文章
- Vue實現購物車效果Vue
- 購物網站的redis相關實現(Java)網站RedisJava
- 購物網站的設計與實現論文網站
- 加入購物車動畫效果實現動畫
- 網站購物車介面(div+css實現)網站CSS
- [好物推薦] Rime的86五筆輸入法配置
- 芒果圈購物網站網站
- jQuery商品飛入購物車效果jQuery
- 用Provider實現商品加入購物車的動畫效果IDE動畫
- angularjs實現的購物車效果程式碼例項AngularJS
- 成品直播原始碼推薦,實現文字載入效果 文字跳動原始碼
- 直播網站程式原始碼,採用Redis實現購物車功能網站原始碼Redis
- 購物網站流程圖(收藏)網站流程圖
- 推薦一個網站網站
- IT技術網站推薦網站
- 購物車的實現原理
- jQuery+PHP實現購物商城常用的星級評分效果jQueryPHP
- 推薦一個好用的網站網站
- 關於latex的網站推薦網站
- 推薦的程式設計網站程式設計網站
- 推薦幾款比較實用的工具,網站網站
- 介紹一款開源電商網站的購物車新增功能的實現網站
- Web 端 實現 app “輸入驗證碼 ”的效果WebAPP
- .購物|推廣中文域名在全世界的應用
- 網站登入JWT的實現網站JWT
- 高清配圖網站推薦網站
- 優秀網站推薦4網站
- 【Python資料探勘課程】八.關聯規則挖掘及Apriori實現購物推薦Python
- 第一象限:網購人群何時瀏覽購物網站?網站
- 電商購物網站 - 需求與設計網站
- 那些我混跡過的購物分享網站網站
- axure教程:如何實現數字輸入框效果
- 物聯網平臺推薦:ThingsKit
- 深度學習實驗資料集網站推薦深度學習網站
- 推薦系統入門之使用協同過濾實現商品推薦
- 購物車原理以及實現
- React實現購物車功能React
- phper gopher 學習網站推薦PHPGo學習網站