Taobao のような JSsearch 検索 (詳細なチュートリアル)-jsチュートリアル-php.cn

この記事では、淘宝網がキーワードを検索し、関連する商品検索をプルダウンする方法を模倣して、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 行の

人気のチュートリアル

詳細>