web-dev-qa-db-ja.com

先行入力には常に最大5つの候補のみが表示されます

Typeahead.jsを使用して提案する以下のコードがあります。うまく動作するので、コードに大きな問題はありません。

私が直面する小さな問題は、リモートURLから5つ以上の提案があったとしても、常に5つの提案しか表示されないことです。

var isearch = new Bloodhound({
    datumTokenizer: function(d) { 
         return Bloodhound.tokenizers.whitespace(d.value); 
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: "http://localhost/search/get-data/%QUERY"
});

isearch.initialize();  

$("#search_box .typeahead").typeahead(null,{ name: "isearch",
    displayKey: "value",
    source: isearch.ttAdapter(),
    templates: {
         suggestion: Handlebars.compile("{{value}}")
    }
});

私が期待するのは、より多くの提案があり、ユーザーが見るためのスクロールバーがあるはずだということです。

javascriptjquerylimittypeahead.jstwitter-typeahead
32
Purus

Typeaheadバージョン0.11.1の場合：

先行入力オブジェクトのインスタンス化中に「limit」を指定して、表示する提案の数を設定します。

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
 limit: 10, // This controls the number of suggestions displayed
 displayKey: 'value',
 source: movies
});

ここで実際の例を参照してください。

http://jsfiddle.net/Fresh/ps4w42t4/

Typeaheadバージョン0.10.4。

Bloodhound提案エンジンには、「limit」オプションのデフォルト値5があります（つまり Bloodhound＃getから返される提案の最大数 ）

Bloodhoundオブジェクトをインスタンス化するときに、目的の値を指定することにより、制限を増やすことができます。たとえば、10の制限を指定するには：

var isearch = new Bloodhound({
 datumTokenizer: function(d) { 
     return Bloodhound.tokenizers.whitespace(d.value); 
 },
 queryTokenizer: Bloodhound.tokenizers.whitespace,
 remote: "http://localhost/search/get-data/%QUERY",
 limit: 10
});

制限が10に設定されているTypeaheadのインスタンスの例は、次の場所にあります。

http://jsfiddle.net/Fresh/w03a28h9/

54
Ben Smith

私の場合、「制限」オプションは機能しましたが、別の方法で機能しました。 Bloodhoundではなくtypeaheadに制限オプションを設定する必要がありました。誰かを助けることができるように、私は私のケースを投稿しています。

bloodhoundSuggestionEngine = new Bloodhound({
datumTokenizer : function(d) {
return Bloodhound.tokenizers.whitespace(d.key);
},
queryTokenizer : Bloodhound.tokenizers.whitespace,
local : myOptions
});

$("#myinputbox").typeahead({
minLength : 3,
highlight : true
}, {
displayKey : 'key',
source : bloodhoundSuggestionEngine.ttAdapter(),
limit: 10
});
36
Atul Kumbhar

@Freshで提案されているBloodhoundのインスタンス化の制限を追加することとは別に、CSSで以下のスタイリングを行い、目的の結果を得ました。

.tt-suggestions {
  min-height: 300px;
  max-height: 400px;  
  overflow-y: auto;
}

コンテナを強制的に400pxにして、さらに結果が出たときにスクロールバーが表示されるようにしました。私はこのアプローチが欲しかったのは、スクリーンにもっと多くの領域を奪いたくないからです。これは、100件の結果がある場合でも機能し、画面をブロックしません。

4
Purus

Typeaheadバージョン0.11.1の場合：

先行入力オブジェクトのインスタンス化中に「limit」を指定して、表示する候補の数を設定しますが、ソースが返す最大数よりも 1少ない少ないことを確認します。

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    limit: 9, // one less than your return value. This controls the number of suggestions displayed
    displayKey: 'value',
    source: movies
});

https://github.com/Twitter/typeahead.js/issues/1201 を参照してください

3
BusyBee

別の方法は、Typeaheadクラスのデフォルトを直接変更することです。

$.fn.typeahead.defaults = { ... items: 8, ...}

に

items: 'all'

2
argoden

@Atulの答えは間違いなく助けになりましたが、ブラッドハウンドに関連する別の問題がありました。私はリモコンを使用していましたが、リモコンが動作することがわかっているという結果は得られませんでした。ブラッドハウンドキャッシュで十分近いものを見つけ、リモートにデータを要求しなかったためです。したがって、ブラッドハウンドのsufficientオプションをデフォルトから100に上げると、常により多くのデータをリモートに要求しています。

0
viggity