web-dev-qa-db-de.com

Typeahead zeigt immer nur maximal 5 Vorschläge

Ich habe den folgenden Code unter Verwendung von Typeahead.js für Vorschläge. Ich habe keine größeren Probleme mit dem Code, da er gut funktioniert.

Das kleinere Problem ist, dass ich zu jeder Zeit nur 5 Vorschläge sehe, obwohl es mehr als 5 Vorschläge von der Remote-URL gibt.

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}}")
    }
});

Ich erwarte, dass es mehr Vorschläge gibt, und es sollte eine Bildlaufleiste für Benutzer geben.

29
Purus

In der Typeahead-Version 0.11.1:

Geben Sie während der Instantiierung des Typhead-Objekts "limit" an, um die Anzahl der anzuzeigenden Vorschläge festzulegen, z.

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

Sehen Sie hier ein Arbeitsbeispiel:

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


In der Typeahead-Version 0.10.4.

Das Bloodhound-Vorschlagsmodul hat einen Standardwert von fünf für die Option "limit" (d. H. Die maximale Anzahl der Vorschläge, die von Bloodhound zurückgegeben werden sollen. # Get )

Sie können den Grenzwert erhöhen, indem Sie den gewünschten Wert angeben, wenn Sie Ihr Bloodhound-Objekt instanziieren. Um beispielsweise ein Limit von 10 anzugeben:

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
});

Ein Beispiel für eine Instanz von Typeahead, bei der der Grenzwert auf 10 festgelegt ist, finden Sie hier:

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

52
Ben Smith

In meinem Fall funktionierte die 'Limit'-Option auf andere Weise. Ich musste die Limit-Option auf Typeahead anstelle von Bloodhound setzen. Ich poste meinen Fall, damit er jemandem helfen kann.

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
});
35
Atul Kumbhar

Neben dem Hinzufügen des von @Fresh vorgeschlagenen Limits für die Bloodhound-Instantiierung habe ich das folgende Styling in CSS vorgenommen, um das gewünschte Ergebnis zu erzielen.

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

Was ich gemacht habe, ist den Container auf 400px zu zwingen, damit ich eine Bildlaufleiste bekomme, wenn mehr Ergebnisse vorliegen. Ich wollte diesen Ansatz, weil ich nicht wollte, dass der Bildschirm mehr Fläche einnimmt. Dies funktioniert auch bei 100 Ergebnissen .. und blockiert den Bildschirm nicht.

4
Purus

Eine andere Möglichkeit wäre, die Standardwerte in der Typeahead-Klasse direkt zu ändern.

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

zu

items: 'all'

2
argoden

In der Typeahead-Version 0.11.1:

Geben Sie "limit" während der Instantiierung des typeahead-Objekts an, um die Anzahl der anzuzeigenden Vorschläge festzulegen. Stellen Sie jedoch sicher, dass es eins weniger ist als die maximale Anzahl, die Ihre Quelle zurückgibt.

// 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
});

siehe https://github.com/Twitter/typeahead.js/issues/1201

2
BusyBee

@ Atuls Antwort hat mir definitiv geholfen, aber ich hatte ein anderes Problem mit Bloodhound. Ich benutzte eine Fernbedienung und ich würde keine Ergebnisse erhalten, von denen ich weiß, dass die Fernbedienung dienen würde. Der Grund dafür war, dass er etwas nahe genug im Bluthundecache gefunden hatte und die Fernbedienung nicht nach den Daten fragte. Wenn Sie also die Option sufficient für Bloodhound von der Standardeinstellung 100 auf 100 setzen, fordert die Fernbedienung immer mehr Daten an. 

0
viggity