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 行の <script> タグで約 2754 を見つけたら、そこにクエリ コードを記述する必要があります</script>

まず、次のコードを記述します: (入力ボックスの値を繰り返し取得します)

var lastValue = document.getElementById("search-in").value;
setInterval(function(){   
},10)

次に、それをvarに入れます。 入力ボックスの値が変化したかどうかを判定する以下の判定文を書きます

if(lastValue != document.getElementById("search-in").value){          
}

次に、ifに書きます

lastValue = document.getElementById("search-in").value;

この段落は、If値の判定を繰り返すという意味です。入力ボックスの値が変更されたら、それを再割り当てします

次に、以下のように記述します:

if(lastValue==null||lastValue==""){
  document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{
}

この段落は、入力ボックスの現在の値が空である場合に、「検索結果なし」を表示させることです

その後、 else:

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
   document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{ 
}

この時、JSsearchのキーワード検索メソッドを呼び出しています

この時、setIntervalの上の行にカーソルを移動して書きます。 :

var itemList = ["光能表","情侣表","日韩腕表","手表放心淘","瑞士表","陶瓷表","电子表","欧米茄","钢带表","皮带表","镂空机械表","斯沃琪","天梭","运动表","卡西欧","国表","时尚表","女表","儿童表","学生表","浪琴"];

itemList はすべての製品のコレクションです

次に、カーソルを else に戻して次のように書きます:

document.getElementById("search-recommend").innerHTML = newItemList[0];

この時点で、HTML ファイルを再度開き、入力ボックスにコンテンツを入力すると、すでに関連付けがあるということです。

もちろん、これは単なるプロトタイプです。まだ解決すべきバグがあります。つまり、複数の文字列に含まれる文字を入力したときに、必ずしも希望する文字列が推奨されるわけではありません。 JSsearch はすでに完了しています。考えてください。これ以上ここには書きません。このバグを解決したい場合は、JSsearch ドキュメントを参照して自分で解決してください。

上記は私があなたのためにまとめたものです。

関連記事:

axios を使用して vue2 の http リクエストの問題を解決する方法の詳細な説明 (詳細なチュートリアル)

vue プロジェクトに highcharts チャートを導入する方法は何ですか?

Angular での @HostBinding() と @HostListener() の使用法 (詳細なチュートリアル)

vue レンダリング前の表示の問題に対処する方法 (詳細なチュートリアル)

ueditor を使用する (詳細なチュートリアル)

noVNC リモート デスクトップを vue プロジェクトに導入する手順は何ですか🎜🎜

以上がTaobao のような JSsearch 検索 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。