首頁 > web前端 > js教程 > 仿淘寶的JSsearch搜尋(詳細教學)

仿淘寶的JSsearch搜尋(詳細教學)

亚连
發布: 2018-06-11 17:50:39
原創
2619 人瀏覽過

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板