Typeahead affiche toujours seulement 5 suggestions maximum
J'ai le code ci-dessous en utilisant Typeahead.js pour suggestions. Je n'ai pas de problèmes majeurs sur le code car cela fonctionne bien.
Le problème mineur auquel je suis confronté est qu'à un moment donné, Je ne vois que 5 suggestions même s'il y a 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 j'attends, c'est qu'il y ait plus de suggestions, il devrait y avoir une barre de défilement pour les utilisateurs à voir.
6 réponses
Dans la version 0.11.1 de Typeahead:
Spécifiez "limit" 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 la version 0.10.4 de Typeahead.
Le moteur de suggestion Bloodhound a une valeur par défaut de cinq pour l'option "limit" (c'est-à-dire le nombre maximum de suggestions à renvoyer Chien de saint-hubert#get)
Vous pouvez augmenter la limite en spécifiant la valeur désiré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
});
Un exemple D'instance de Typeahead où la limite est définie sur 10 peut être trouvé ici:
Dans mon cas, l'option' limit ' a fonctionné mais de manière différente. J'ai dû mettre l'option limite sur typeahead au lieu de Bloodhound. Je poste mon cas, afin 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
});
En plus d'ajouter la limite pour l'instanciation de Bloodhound comme suggéré par @Fresh, j'ai fait 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 j'obtienne 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 surface. Cela fonctionnera même s'il y a 100 Résultats.. et de ne pas obstruer l'écran.
Une autre façon pourrait être de changer les valeurs par défaut dans la classe Typeahead directement.
$.fn.typeahead.defaults = {
...
items: 8,
...}
À
items: 'all'
La réponse de@Atul m'a certainement aidé, mais j'ai eu un autre problème lié à bloodhound. J'utilisais une télécommande et je n'obtiendrais pas de résultats que je sais que la télécommande servirait. C'était parce qu'il a trouvé quelque chose d'assez proche dans le cache bloodhound et n'a pas demandé à la télécommande les données. Donc, en cognant l'option sufficient sur bloodhound de la valeur par défaut à 100, il demande toujours à la télécommande plus de données.
Dans la version 0.11.1 de Typeahead:
Spécifiez "limit" 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 maximum 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
});