jQueryを使用してファジークエリ機能を備えたコンボボックスコンポーネントを構築する方法

jQuery コンボボックス ファジー クエリは検索ボックスの一般的な形式です。ユーザーはキーワードを入力して検索できます。正確な検索と比較して、ファジー クエリはより便利で高速です。この記事では、jQuery を使用してファジー クエリ機能を備えたコンボボックス コンポーネントを構築する方法を紹介します。

1. 基礎知識

jQuery コンボボックス ファジー クエリを使用するには、次の基礎知識を習得する必要があります:

1. jQuery

# #jQuery は、HTML ドキュメントの操作、イベント処理、アニメーション効果、AJAX およびその他の操作を容易にする、高速かつ簡潔な JavaScript ライブラリです。 jQuery を使用すると、複雑な JavaScript プログラミングを大幅に簡素化できます。

Combobox

Combobox は、テキスト ボックスとドロップダウン リスト ボックスで構成されるコンポーネントです。ユーザーはテキストを入力したり、ドロップダウン リスト内の項目を選択したりできます。 。このうち、テキスト ボックスはキーワードの入力に使用され、ドロップダウン リストは検索結果の表示に使用されます。

ファジー クエリ

ファジー クエリとは、ユーザーがキーワードを入力すると、システムがキーワードに正確に一致するのではなく、そのキーワードを含むすべての検索結果を返すことを意味します。 。

2. jQuery Combobox ファジー クエリの構築

jQuery Combobox ファジー クエリを構築する手順は次のとおりです:

jQuery ライブラリの紹介

ページの先頭で jQuery ライブラリを紹介します:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

テキスト ボックスとドロップダウン リストを作成します

HTML コードは次のとおりです:

<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>

JS 関数の定義

次のコードをページの最後に追加します:

$(function() {
  var availableResults = [
    "Result 1",
    "Result 2",
    "Result 3",
    "Result 4",
    "Result 5"
  ];
 
  $("#search").autocomplete({
    source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(availableResults, function(item) {
        return matcher.test(item);
      }));
    }
  });
});

ページ テスト

ページを開き、検索ボックスにキーワードを入力してプルダウンすると、そのキーワードを含むすべての検索結果がリストに表示されます。

3. 完全なコード例

  
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  
  <script>
  $( function() {
    var availableResults = [
      "Result 1",
      "Result 2",
      "Result 3",
      "Result 4",
      "Result 5"
    ];
    $( "#search" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( availableResults, function( item ){
            return matcher.test( item );
        }) );
      }
    });
  } );
  </script>


 
<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>
 

概要:

上記は、jQuery を使用してコンボボックス ファジー クエリを構築する手順のすべてです。このテクノロジを利用すると、次のことができます。強力な検索機能を備えた Web アプリケーションを迅速に開発します。同時に、より良いユーザーエクスペリエンスを実現するために、クエリの効率とデータベースデータの正確性を確保することにも注意を払う必要があります。

以上がjQueryを使用してファジークエリ機能を備えたコンボボックスコンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。