この記事の例では、商品検索機能を実現するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 これはクエリをクリックせずにメインインターフェースです これは名前クエリをクリックした後です 価格で探す コード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>JavaScript クエリ関数</title> <スタイル> 体{ フォントファミリ: "Microsoft YaHei"; フォントサイズ: 18px; } テーブル { 幅: 800ピクセル; 境界線: 1px実線 #000; 境界線の折りたたみ: 折りたたみ; マージン: 0 自動; } td、th { 境界線: 1px実線 #000; テキスト配置: 中央; } 入力{ 幅: 70ピクセル; } 。検索 { 幅: 600ピクセル; マージン: 20px 自動; } </スタイル> </head> <本文> <div class="検索"> 価格で検索: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">検索</button> <br><br> 製品名で検索: <input type="text" class="product"> <button class="search-pro">検索</button> </div> <テーブル> <頭> <tr> <th>製品名</th> <th>価格</th> <th>プロセッサ</th> <th>スクリーン</th> <th >カメラ</th> <th>バッテリー</th> <th >機能</th> </tr> </thead> <t本文> </tbody> </テーブル> <スクリプト> // 新しい配列メソッドを使用してデータを操作する var data = [ { pname: 'Huawei mateX2', 価格: 17999、 プロセッサ:「Kirin 9000」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Huawei mate40Pro', 価格: 6599、 プロセッサ:「Kirin 9000」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Huawei mate40', 価格: 4999、 プロセッサ:「Kirin 9000E」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Huawei mate30Pro', 価格: 5499、 プロセッサ:「Kirin 990」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Huawei mate30', 価格: 3599、 プロセッサ:「Kirin 990」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Huawei P40Pro'、 価格: 7999、 プロセッサ:「Kirin 990」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Huawei P40'、 価格: 3999、 プロセッサ:「Kirin 990」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Honor 30 Pro', 価格: 3999、 プロセッサ:「Kirin 990」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Huawei mate20Pro', 価格: 1599、 プロセッサ:「Kirin 980」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Xiaomi 11Pro', 価格: 4799、 プロセッサ:「Qualcomm Snapdragon 888」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Xiaomi 11', 価格: 3799、 プロセッサ:「Qualcomm Snapdragon 888」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Xiaomi Mix4', 価格: 5499、 プロセッサ:「Qualcomm Snapdragon 888」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'Redmi K40Pro', 価格: 2999、 プロセッサ:「Qualcomm Snapdragon 888」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { 名前: 'Redmi K40', 価格: 1999年、 プロセッサ:「Qualcomm Snapdragon 870」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'VivoX60Pro', 価格: 5499、 プロセッサ:「Qualcomm Snapdragon 888」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'VivoX60', 価格: 3499、 プロセッサ:'Orion'、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, { pname: 'OPPOReno6Pro', 価格: ''、 プロセッサ:「Qualcomm Snapdragon 888」、 画面:''、 カメラ:''、 バッテリー:''、 特性機能:''、 }, ]; // 1. 要素を定義して取得する var tbody = document.querySelector('tbody');/*tbody を定義する*/ var search_price = document.querySelector('.search-price');/*search-price を定義する*/ var processor = document.querySelector('.processor');/*processor を定義する*/ var screen = document.querySelector ('.screen'); /* 画面を定義する */ var camera = document.querySelector ('.camera'); /* カメラを定義する */ var Battery = document.querySelector ('.Battery'); /* バッテリーを定義する */ var CharacteristicFunction = document.querySelector ('.CharacteristicFunction'); /* 特性関数 */ var start = document.querySelector('.start'); var end = document.querySelector('.end'); var product = document.querySelector('.product'); 日付を設定します。 // 2. データをページにレンダリングする function setDate(mydata) { // まず元の tbody のデータをクリアします tbody.innerHTML = ''; mydata.forEach(function(value) { /* 追加 */ var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.pname + '</td><td>' + 値.価格+'</td><td>' + value.processor+'</td><td>' + value.screen+'</td><td>' + value.camera+'</td><td>' + value.Battery+'</td><td>' + value.CharacteristicFunction+'</td>' ; tr の子要素を追加します。 }); } // 3. 価格で製品を照会する // ボタンをクリックして、製品価格に応じて配列内のオブジェクトをフィルタリングします search_price.addEventListener('click', function() { var newDate = data.filter(function(値) { 戻り値 value.price >= start.value && value.price <= end.value; }); コンソールにログ出力します。 // フィルタリングされたオブジェクトをページにレンダリングします setDate(newDate); }); // 4. あいまい検索 ---- 製品名で製品を検索する あいまい検索 product.addEventListener('keyup', function() { // 取得したデータをページにレンダリングする var result = data.filter(function(value) { if (value.pname.includes(product.value)) { 戻り値 } }) 結果の日付を設定します。 setDate(data.filter(function(value) { if (value.pname.includes(product.value)) { 戻り値 } })); }) </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL のデータ型とフィールド属性の原理と使用法の詳細な説明
目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...
1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...
DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...
ステップ1: MySQLドライバをダウンロードするcmdは作成されたDjangoプロジェクトディレク...
目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...
ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...
01. コマンドの概要gcc コマンドは、GNU がリリースした C/C++ ベースのコンパイラを使...
目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...
1. Logrotateツールの紹介Logrotate はログファイル管理ツールです。Linux に...
問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...
目次質問伸ばす問題を解決する要約する質問プロジェクトの要件に従って、以下の州地図で個々の都市を(異な...
ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コン...
目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...
この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...
目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...