Realizar una consulta usando Typeahead + Bloodhound y FOSJsRoutingBundle en Symfony2
-
02-01-2020 - |
Pregunta
Estoy intentando configurar Typeahead + Bloodhound para realizar una búsqueda con sugerencias en un campo.El código HTML para el campo es el siguiente:
<div class="col-sm-10" id="products_forms">
<input type="text" placeholder="Producto" id="ProductoForm_0_product_id" name="ProductoForm[0][product_id]" class="form-control typeahead">
</div>
Utilizo dos funciones principales de Symfony:uno para devolver todos los productos y utilizarlo como prefetch
y el otro para los productos filtrados.Así es como se ven las rutas para esas funciones:
// the one I use as prefetch parameter in bloodhound
* @Route("/get_products", name="all_products")
// the one I use as remote
* @Route("/get_products/{filter}", name="filter_products")
Como puede ver, el primero no obtuvo ningún parámetro ya que devuelve todos los productos como valores JSON, pero el segundo toma {filter}
como argumento para realizar la LIKE
y devuelve sólo los productos filtrados.
Ahora no sé cómo funciona Bloodhound, así que leí el documentos y también para escritura anticipada lea el documentos y toma un ejemplo de aquí el Remote
uno e hizo este código:
// Trigger typeahead + bloodhound
var products = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: Routing.generate('all_products'),
remote: Routing.generate('filter_products', { 'filter' : '%query' })
});
products.initialize();
$('#products_forms .typeahead').typeahead(null, {
name: 'products',
displayKey: 'value',
source: products.ttAdapter()
});
¿Está bien?Quiero decir, cuando se carga la página obtendré todos los productos precargados, pero si escribo alguno en .typeahead
elemento ¿obtendré solo los filtrados?no se si %query
es el valor correcto al que debo pasar filter_products
ruta para obtener los valores filtrados.¿Alguna ayuda?
Esta es la primera vez que uso Typeahead + Bloodhound
Solución
Reemplazar remote: Routing.generate('filter_products', { 'filter' : '%query' })
con p.e.
var url = Routing.generate('filter_products', {filter: 'WILDCARD'});
// ... some code
remote: {
url: url,
wildcard: 'WILDCARD'
}
Eso generará una URL general con RoutingBundle primero y tomará 'WILDCARD' como filtro.Luego dígale a Bloodhound que use 'COMODÍN' en la URL como marcador de posición y lo reemplazará perfectamente con la consulta ingresada.