何千もの可変高さの項目のバーチャルスクロールウェブのオートコンプリート？弊社のWebアプリで

Question

は、我々は、オートコンプリートの結果は、オートコンプリート対応の検索ボックスを追加します：ユーザーが一致する結果の長いリストを参照できるように、

1. が垂直方向にスクロールすることができるが、あるいはすることができます何かを入力する前に完全なリストを参照してください。 （検索ボックスにフォーカスが入るとすぐにオートコンプリートリストがポップアップします）
2. は、それぞれの項目に名前（場合によっては2行に折り返す可能性がある）があるため、オートコンプリート項目の変数の高さを持つことができます。短い説明（1-3行の長さになります）。
3. には、プレーンテキストだけでなく、書式設定されたHTML（名前の太字など）を使用できます。このフォーマットされたHTMLをレンダリングするためにKnockout.jsテンプレートを使用していますが、別の技術が必要な場合には柔軟性があります。

オートコンプリートリストのソースデータは、クライアントのJavaScript配列に格納されています。また、クライアント上には、ユーザの入力としてどの結果が表示されるかを決定するフィルタリングロジックがあります。理論的には、サーバーの依存関係がないため、すばらしく高速なソリューションが必要です。

自動完成リスト全体をレンダリングすると（例えば、JQuery UI autocompleteのような実装を使用）、数千ものDOM要素が作成され、クライアントでのレンダリングが非常に遅くなります。 Knockout.jsのオーバーヘッドはそれを悪化させます。ユーザーが検索ボックスにフォーカスを合わせると、ブラウザは数秒間ロックされます。

Kendo UI virtual-scrollable autocomplete widgetを試しましたが、剣道の実装は固定高さの要素に限定されています。

次は何を試してくださいか？

Answer 1

select2をお勧めします。それはオートコンプリートウィジェットではありませんが、あなたがコンボボックスの形で求めているすべてのことを行います。ユーザーは選択リストにない値も入力できるように構成できます。最後に、thisは、ワードラップされたアイテムを許可するようにCSSを変更するトリックです。

私はそれを非常に大きな配列で使っていませんが、あなたが言うように、理論的には速く動くはずです。多分それは調査する価値があります。