Skip to main content
1 de 4
Triby
  • 25.2k
  • 3
  • 18
  • 36

Si en lugar de usar el autocomplete de jQuery prefieres seguir con lo que ya tienes, creo que lo primero es mover return Response($output); una llave abajo, fuera del if, para garantizar que siempre devuelves algo y agrega un evento onclick a los enlaces:

public function search(Request $request)
{
    if($request->ajax())
    {
        $output="";
        $products=DB::table('productos')->where('producto','LIKE','%'.$request->search."%")->get();
        if($products)
        {
            $output.='<div class="result">';
            foreach ($products as $key => $product) {
                $output.=
        '<a href="" onclick="linkBusca(this);">
            <div class="row espacioRowBusca">'.
                '<div class="col-3"><img src='. asset("images/productos/camas/{$product->imagen}") .' alt="" class="imgBuscador"></div>'.
                '<div class="col-9">
                    <h3>'.$product->marca.'</h3>
                    <h2>'.$product->producto.'</h2>
                    <h5>'.$product->categoria.'/'.$product->subcategoria.'</h5>
                </div>'.
            '</div>
        </a>';
            } // end foreach
            $output.='</div>';
        } else {
            $output = 'No se encontraron resultados';
        } // end if
        return Response($output);
    }
}

Luego, en Javascript, agrega la función para cerrar el div luego de hacer clic en un enlace:

<script>
function linkBusca(item) {
    // Puedes usar item para buscar contenido del enlace en que se hizo clic
    // Limpia el contenido del div de resultados
    $('#resultados').html();
}
</script>

Una de las ventajas de usar autocomplete es que PHP devuelve solo un arreglo con resultados y los formateas en el navegador, reduciendo la transferencia de datos y, por supuesto, mejorando el rendimiento.

Respecto al comportamiento, es más fácil controlar que se cierren los resultados al hacer clic en un enlace o, incluso, al hacer clic en otra parte de la página.

Triby
  • 25.2k
  • 3
  • 18
  • 36