模倣淘宝網 JSsearch 検索ドロップダウンの詳細な使用状況分析-jsチュートリアル-php.cn

模倣淘宝網 JSsearch 検索ドロップダウンの詳細な使用状況分析

小云云

リリース： 2018-01-16 13:17:41

オリジナル

1440 人が閲覧しました

この記事では主に、タオバオがキーワードを検索して関連商品を検索する方法を真似て、JSsearch の使用法を分析します。エディターで学習しましょう。

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

JSsearch1.0 コミュニティバージョンをダウンロードします

ダウンロード後、同様の別のバージョンをダウンロードしますタオバオのショッピングページへ

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

この時点でページを閉じて、JSsearch.jsをタオバオのルートディレクトリのjsフォルダにコピーします。 page

コピーしたら、HTMLページに導入します（本文の一番下に書きます）

<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 行にある

著者別の最新記事

最新の PHP Programmer Toolbox v1.0 バージョンの紹介

1970-01-01 08:00:00
vue-cliカスタムディレクティブの詳細説明検証スライダーを追加するディレクティブ

1970-01-01 08:00:00
PHPでIMAPを利用したメール受信例を詳しく解説

2023-03-19 18:36:02
Redisの一般的な利用シナリオの共有

2023-03-21 07:36:01
JSの数値と文字列の変換を詳しく解説

1970-01-01 08:00:00
Dreamweaver Web ページに電子メールリンクを追加する共有の例

1970-01-01 08:00:00
Vue フィルターとその使用法の概要

1970-01-01 08:00:00
PHPの基礎知識メモ共有

2023-03-20 14:32:01
WeChatアプレットファイルAPIの詳細説明

1970-01-01 08:00:00
JSで実装されるajaxと同一オリジン戦略について詳しく解説

1970-01-01 08:00:00