简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

亚连
リリース： 2018-06-11 17:50:39
オリジナル
2556 人が閲覧しました

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

人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！