2011-08-04 17 views
4

私はjquery ui autocompleteを使って検索しています。現在私は都市と国のjsonリストをプリロードしているので、ロードが速く、サーバーをポーリングする必要はありません。しかし今、私は私のオートコンプリート検索の特定の場所、すなわち私のケースのホテル、レストランなどの検索の名前を追加したいと思います。 ajaxデータベースクエリ?q =彼らが入力するか、またはそれは可能であり、2つの間に何らかの種類のハイブリッドを持つことが有益でしょう。彼らは特定の文字数に達するか、5未満の結果があるまで、IEはプリロードされたリストですか?jquery uiオートコンプリート複合検索の前後の結果

ロード時間を節約するか、頭痛になるでしょうか?もしそうなら、どうすればいいのですか?

私は元々ajaxクエリとして持っていましたが、スピードアップするためにプリロードされたjsonに切り替えました。都市と国の完全なリストは小さいですが、場所のリストは大きいです。人々が特定の場所ではなく、場所を検索する時間の99.9%。

答えて

4

あなたがこれを達成する方法:

あなたはオートコンプリートのsourceオプションに関数を渡すことで、このような何かを達成することができます。 2つのソースを使用した「ハイブリッド」オートコンプリートのためにあなたのアイデアの

$("#tags").autocomplete({ 
    source: function(request, response) { 
     // This is how autocomplete finds matching results by default: 
     var results = $.ui.autocomplete.filter(common, request.term); 

     if (results.length < 5) { 
      // Perform an ajax call. 
      // In the success method, call response(results) 
     } else { 
      response(results); 
     } 
    } 
}); 

両方:あなたはAJAX呼び出しを使用するか、単にクライアント側でデータをフィルタリングするために必要であれば、その関数の中で、あなたが決定するために、いくつかのロジックを実行することになり興味をそそられた。しかし、ソリューションをテストしているうちに、私は潜在的なユーザビリティの問題に遭遇しました。通常、このタイプのコントロールでは、入力時にの数が少なくなると、の結果が戻ってくることが予想されます。例えば

:あなたのローカルソース配列は、次のようになります言うことができます:

['jquery', 'jquery-ui', 'jquery-ajax', 'jquery-plugins'] 

そして、あなたが5つの文字が入力され、たとえば、後に多くの結果を示すの戦略を使用します。ユーザーがj-q-u-e-r-yと入力した後にyと入力すると、AJAX呼び出しがトリガーされ、結果が多く表示されます。ユースケースに応じてユーザーにとっては単純ではない場合があります。

例:http://jsfiddle.net/andrewwhitaker/wSBa3/

私はあなたが戻ってサーバから来ることができる結果の数にいくつかの制限を設定する場合、これは良くなると思います。この値をAJAX呼び出しが発生する前に最小限の結果と同期させると、相互作用はファンキーには見えません。実際には、この例では、私にはもっと説得力の概念を作る:

例:http://jsfiddle.net/andrewwhitaker/NxELC/


それは価値がありますか?

負荷時間を節約するか頭痛になるのでしょうか?

多分両方!

これは実際にはクエリがどれだけリソースを消費しているか、私たちが話しているデータ量と、このような解決策がどれほど維持可能であるかにかかっています。私は最初の2つのオプションについて本当に推測することはできませんが、私はあなたが2つのリストを維持することでメンテナンスの問題に遭遇する可能性があると言います。この問題の種類は、使用しているサーバーサイドの技術によって異なります。私はあなたが正しくそれをしたら、あなたは何の問題もないだろうと思う。

長時間のお答えには事前にお詫び申し上げますが、助けていただければ幸いです。

関連する問題