web-dev-qa-db-fra.com

Typeahead affiche toujours que 5 suggestions maximum

J'ai le code ci-dessous en utilisant Typeahead.js pour des suggestions. Je n'ai pas de problèmes majeurs sur le code car cela fonctionne bien.

Le problème mineur que je rencontre est qu’à un moment donné, je ne vois que 5 suggestions bien qu’il y ait plus de 5 suggestions de l’URL distante.

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

Ce que je pense, c’est qu’il y ait plus de suggestions, il devrait y avoir une barre de défilement à la disposition des utilisateurs.

javascriptjquerylimittypeahead.jstwitter-typeahead
29
Purus

Dans la version 0.11.1 de Typeahead:

Spécifiez "limite" lors de l'instanciation de l'objet typeahead pour définir le nombre de suggestions à afficher, par exemple.

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

Voir un exemple de travail ici:

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

Dans Typeahead version 0.10.4.

Le moteur de suggestion Bloodhound a une valeur par défaut de cinq pour l'option "limite" (c'est-à-dire Le nombre maximal de suggestions à renvoyer depuis Bloodhound # get )

Vous pouvez augmenter la limite en spécifiant la valeur souhaitée lorsque vous instanciez votre objet Bloodhound. Par exemple, pour spécifier une limite de 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
});

Vous trouverez un exemple d'instance de Typeahead dans laquelle la limite est définie à 10:

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

52
Ben Smith

Dans mon cas, l'option "limite" a fonctionné mais de manière différente. Je devais mettre l'option limite sur typeahead au lieu de Bloodhound. Je poste mon cas pour que cela puisse aider quelqu'un.

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

Outre l'ajout de la limite d'instanciation Bloodhound suggérée par @Fresh, j'ai appliqué le style ci-dessous en CSS pour obtenir le résultat souhaité.

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

Ce que j'ai fait est de forcer le conteneur à 400px afin que je reçoive une barre de défilement quand il y a plus de résultats. Je voulais cette approche parce que je ne voulais pas que l'écran prenne plus de place. Cela fonctionnera même s'il y a 100 résultats .. et ne bloquera pas l'écran.

4
Purus

Une autre solution pourrait consister à modifier directement les valeurs par défaut dans la classe Typeahead.

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

à

items: 'all'

2
argoden

Dans la version 0.11.1 de Typeahead:

Spécifiez "limite" lors de l'instanciation de l'objet typeahead pour définir le nombre de suggestions à afficher, mais assurez-vous qu'il est un de moins que le nombre maximal que votre source renvoie.

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

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

2
BusyBee

La réponse de @ Atul m'a certainement aidé, mais j'avais un autre problème lié au limier. J'utilisais une télécommande et je n'obtiendrais pas de résultat si je savais que la télécommande servirait. C'est parce qu'il avait trouvé quelque chose d'assez proche dans la cache de limiers et ne demandait pas les données à la télécommande. Ainsi, en faisant passer l'option par défaut sufficient de la valeur par défaut à 100, elle demande toujours plus de données à la télécommande. 

0
viggity