Vraag Typeahead toont altijd slechts 5 suggesties maximaal


Ik heb de onderstaande code met behulp van Typeahead.js voor suggesties. Ik heb geen grote problemen met de code omdat het prima werkt.

Het kleine probleem waar ik voor sta, is dat ik op een gegeven moment slechts 5 suggesties zie, ook al zijn er meer dan 5 suggesties van de externe URL.

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

Wat ik verwacht is dat er meer suggesties zijn, er zou een schuifbalk moeten zijn die gebruikers kunnen zien.


23
2018-06-01 15:59


oorsprong


antwoorden:


In Typeahead versie 0.11.1:

Geef 'limiet' op tijdens het maken van het typeahead-object om het aantal suggesties in te stellen dat bijvoorbeeld wordt weergegeven.

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

Bekijk hier een werkvoorbeeld:

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


In Typeahead versie 0.10.4.

De Bloodhound-suggestiemotor heeft een standaardwaarde van vijf voor de "limiet" -optie (d.w.z. Het maximale aantal suggesties om terug te keren van Bloodhound # get)

U kunt de limiet verhogen door de gewenste waarde op te geven wanneer u uw Bloodhound-object instelt. Om bijvoorbeeld een limiet van 10 te specificeren:

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

Een voorbeeld van een exemplaar van Typeahead waarbij de limiet is ingesteld op 10, vindt u hier:

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


41
2018-06-01 22:00



In mijn geval 'limiet' optie werkte maar op een andere manier. Ik moest de limietoptie op typeahead plaatsen in plaats van Bloodhound. Ik plaats mijn zaak, zodat het iemand kan helpen.

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

32
2017-07-23 02:00



Afgezien van het toevoegen van de limiet voor Bloodhound-instantiatie zoals voorgesteld door @Fresh, deed ik de onderstaande stijl in CSS om het gewenste resultaat te krijgen.

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

Wat ik heb gemaakt is om de container naar 400 px te dwingen, zodat ik een schuifbalk krijg wanneer er meer resultaten zijn. Ik wilde deze benadering omdat ik niet wilde dat het scherm meer ruimte zou nemen. Dit werkt ook als er 100 resultaten zijn .. en het scherm niet zal blokkeren.


4
2018-06-02 17:37



Een andere manier kan zijn om de standaardinstellingen in de klasse Typeahead rechtstreeks te wijzigen.

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

naar

items: 'all'


2
2018-05-17 06:49



Het antwoord van @ Atul heeft me zeker geholpen, maar ik had een ander gerelateerd probleem met bloedhond. Ik gebruikte een afstandsbediening en ik zou geen resultaten krijgen waarvan ik weet dat de afstandsbediening zou dienen. Het kwam doordat het iets dichtbij genoeg vond in de bloedhalscache en de afstandsbediening niet om de gegevens vroeg. Dus door de sufficient optie op bloedhond van standaard naar 100, het vraagt ​​altijd van de afstandsbediening om meer gegevens.


0
2018-01-13 17:43