本文主要透過仿照淘寶搜尋關鍵字後下拉相關產品搜尋樣子的製作,深度分析了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行的