Taobao のような JSsearch 検索 (詳細なチュートリアル)

この記事では、淘宝網がキーワードを検索し、関連する商品検索をプルダウンする方法を模倣して、JSsearch の使用法を詳細に分析します。

まず、JSsearch プログラムの関連ソース コードを示します: https://gitee。 com/skyogo/ JSsearch

JSsearch1.0 Community版をダウンロードします

ダウンロード後、タオバオのようなショッピングページをダウンロードします

そして、このページを開くとこんな感じです

この時点でページを閉じます。JSsearch.jsを淘宝網ページのルートディレクトリにあるjsフォルダーにコピーします

コピー後、HTMLページに導入します( body)

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

それから上に追加します このコードを76行目(入力マークの下)に書きます

<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 行の