jQueryを使用してファジークエリ機能を備えたコンボボックスコンポーネントを構築する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-05 14:18:33

オリジナル

851 人が閲覧しました

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

1. 基礎知識

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

jQuery

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

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

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

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

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

ページの先頭で 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>

ログイン後にコピー

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

$(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. 完全なコード例




  
  jQuery Combobox模糊查询
  
  <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 サイトの他の関連記事を参照してください。