jquery - セレクトボックスで膨大なデータを扱う

Question

こんにちは、jQuery を使用して、mySQL テーブルの 1 つから「アイテム」を取得しています。そのテーブルには約 20,000 個の「アイテム」があり、フォームの検索パラメーターとして使用されます。したがって、基本的には、その「アイテム」を含む「購入」を検索できます。

ドロップダウンリストから「アイテム」を選択できるようにする必要がありますが、ドロップダウンリストに20,000個の「アイテム」を入力するにはかなり時間がかかります。オートコンプリート付きのドロップダウン ボックスのページネーションをサポートする jQuery プラグインがあるかどうか疑問に思っていました。

そうすれば、ユーザーは最初の数文字を入力してリストをフィルタリングするか、矢印をクリックしておそらく 20 個の項目を表示し、最後に「クリックして詳細を確認してください」と入力することができます。

巨大なデータセットを処理し、HTML 選択ボックスにそのデータセットを入力するための他の提案を受け入れます。

この検索ページには複数の選択ボックスがあり、ユーザーは「アイテム」や「顧客」などを選択して「検索」をクリックできます。

Answer 1

あなたが求めているもののための特定のプラグインはないと思いますが、あなたはかなり簡単に自分でプラグインを書くことができるはずです。

基本的にコンセプトはこれです：

• jQuery$.ajaxを使用してデータベースからデータを取得します
• jQueryからデータベースのSELECTステートメントに2つのパラメーターを渡します
  • キーワード
  • PageIndex
• キーワード（オートコンプリート）で始まるすべてのアイテムを検索しますが、特定の数の結果（つまり、20）のみを返します
• ドロップダウンに結果を入力したら、実際に20を超えるアイテムがあることを確認し、 「クリックして詳細を表示してください...」<option>という名前の追加アイテムを追加します。
• インデックスを確認し、ドロップダウンイベントを使用して同じ$.ajax呼び出しをバインドし（リストの21番目のアイテムであるためインデックスは20になります）、データベースに送信するpageIndexを増やします。<option>onchange

ページングについてさらにサポートが必要な場合は、このチュートリアルPHP/mySQLを確認してください。

Answer 2

それほど大きなデータセットがあるので、Ajax を使用する時が来ました...

これらのオートコンプリート プラグインをチェックしてください。

http://www.pengoworks.com/workshop/jquery/autocomplete.htm

と

http://code.google.com/p/jquery-autocomplete/

Answer 3

20000 アイテムは、リストが検索、できれば少なくとも数文字の検索に応答してアイテムを返すだけでない限り、どのような種類のドロップダウン リストにも大きすぎます。「クリックしてさらに表示」は弱く、ドロップダウンの典型的な動作ではありません。そして、ユーザーが欲しいアイテムがリストの 10000 アイテムにある場合はどうなるでしょうか?

アイテムが単純な名前と値のペア (文字列名、整数 ID など) であると仮定します。

ただし、JSON は軽量な方法で 20000 項目を表すことができます。これらのアイテムにバインドし、ページを通過し、リアルタイムのフィルタリングを提供する単純なクライアント側のダイアログ (またはリスト) を作成できます。これは間違いなく可能ですが (私は実行しました)、かなりの量のカスタム スクリプトまたは既存のコントロールが必要です。

このアプローチの利点は、キーストロークごとにリアルタイムで検索できることです。驚くべきことに、JavaScript は大規模なデータ セットに対する単純な検索を非常に簡単に処理します。

パフォーマンスが重要な場合、JSON であっても、20000 項目は依然として大きすぎます。検索、フィルタリング、ページネーションなどのために、クライアント側のスクリプトをサーバー コードと組み合わせて、限られた一連の結果のみをユーザーに提示します。

編集: 独自のデータ テーブル コントロールを記述したくない場合は、JSON を使用するグリッドの可能なオプションの 1 つを次に示します: http://developer.yahoo.com/yui/examples/datatable/