javascript - remote - typeahead bootstrap
Typeahead siempre muestra solo 5 sugerencias como máximo (6)
Tengo el siguiente código usando Typeahead.js para sugerencias. No tengo problemas importantes en el código, ya que funciona bien.
El problema menor al que me enfrento es que en cualquier momento dado, veo solo 5 sugerencias, aunque hay más de 5 sugerencias de la URL remota.
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}}")
}
});
Lo que espero es que haya más sugerencias, debería haber una barra de desplazamiento para que los usuarios vean.
Además de agregar el límite para la creación de instancias de Bloodhound como lo sugiere @Fresh, hice el siguiente estilo en CSS para obtener el resultado deseado.
.tt-suggestions {
min-height: 300px;
max-height: 400px;
overflow-y: auto;
}
Lo que hice fue forzar el contenedor a 400px para obtener una barra de desplazamiento cuando haya más resultados. Quería este enfoque porque no quería que la pantalla tomara más espacio. Esto funcionará incluso si hay 100 resultados ... y no bloqueará la pantalla.
En la versión 0.11.1 de Typeahead:
Especifique "límite" durante la creación de instancias del objeto typeahead para establecer el número de sugerencias para mostrar, por ejemplo
// Instantiate the Typeahead UI
$(''.typeahead'').typeahead(null, {
limit: 10, // This controls the number of suggestions displayed
displayKey: ''value'',
source: movies
});
Vea un ejemplo de trabajo aquí:
http://jsfiddle.net/Fresh/ps4w42t4/
En la versión Typeahead 0.10.4.
El motor de sugerencias de Bloodhound tiene un valor predeterminado de cinco para la opción "límite" (es decir, el número máximo de sugerencias para regresar de Bloodhound # obtener )
Puede aumentar el límite especificando el valor deseado al crear una instancia de su objeto Bloodhound. Por ejemplo, para especificar un límite 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 ejemplo de una instancia de Typeahead donde el límite se establece en 10 se puede encontrar aquí:
En la versión 0.11.1 de Typeahead:
Especifique "límite" durante la creación de instancias del objeto typeahead para establecer el número de sugerencias que se mostrarán, pero asegúrese de que sea una cifra menor que la cantidad máxima que devuelve su fuente.
// 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
});
En mi caso la opción ''límite'' funcionó pero de manera diferente. Tuve que poner la opción de límite en typeahead en lugar de Bloodhound. Estoy publicando mi caso, para que pueda ayudar a alguien.
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
});
La respuesta de @Atul definitivamente me ayudó, pero tuve otro problema relacionado con el sabueso. Estaba usando un control remoto y no obtendría resultados que sé que serviría el control remoto. Fue porque encontró algo lo suficientemente cerca en el caché de sabueso y no le pidió al control remoto los datos. Entonces, al colocar la opción sufficient en sabueso desde el valor predeterminado a 100, siempre le está pidiendo al remoto más datos.
Otra forma podría ser cambiar los valores predeterminados en la clase Typeahead directamente.
$.fn.typeahead.defaults = { ... items: 8, ...}
a
items: ''all''