商品クエリ機能を実現するJavaScript

商品クエリ機能を実現するJavaScript

この記事の例では、商品検索機能を実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsを使用して製品クエリケースを実現する

<<:  ドッカー専用倉庫港湾建設プロセス

>>:  MySQL のデータ型とフィールド属性の原理と使用法の詳細な説明

推薦する

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...

DPlayer.js ビデオ再生プラグインの使い方

DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...

Django+mysql の設定と簡単な操作データベースのサンプルコード

ステップ1: MySQLドライバをダウンロードするcmdは作成されたDjangoプロジェクトディレク...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

Linux gccコマンドの具体的な使い方

01. コマンドの概要gcc コマンドは、GNU がリリースした C/C++ ベースのコンパイラを使...

uniappとvueの違いの詳細な説明

目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...

Logrotate は 2 時間ごとに Catalina.out ログローテーションを実装します

1. Logrotateツールの紹介Logrotate はログファイル管理ツールです。Linux に...

Linux で 1 つのファイルの内容を別のファイルの末尾にコピーする

問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...

地域のカスタムカラーのためのechars 3Dマップソリューション

目次質問伸ばす問題を解決する要約する質問プロジェクトの要件に従って、以下の州地図で個々の都市を(異な...

Vue での ref の使用法とデモンストレーション

ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コン...

mysqlはコンマに基づいてデータ行を複数の行に分割します

目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...

Vueはechart円グラフの凡例のパーセンテージを表示するメソッドを実装します

この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...

DockerはRedis5.0をビルドし、データをマウントします

目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...