0

Buenas tengo un buscador pero tengo algunas dudas. Os muestro el código primero.

EDITO PREGUNTA PARA VER CON LAS MEJORAS POR QUE SIGUE FALLANDO

public function search(Request $request)
    {
        if($request->ajax())
        {
            $output = '<div class="result">';
            $products=DB::table('productos')->where('producto','LIKE','%'.$request->search."%")->get();
            if($products)
                {
                foreach ($products as $key => $product) {
                    $output.=
                '<a href="'. route('web.detalle', ['cat' => $product->categoria, 'sub' => $product->subcategoria, 'url' => $product->url]) .'">
                    <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
                } else {
                    $output.= 'No se encontraron resultados';
                } // end if
            $output.='</div>';
            return Response($output);
        }
    }

La ruta

Route::get('/search', "Web@search");

El buscador y donde muestra los resultados

<input type="text" class="form-control inputSearch" id="search" name="search" placeholder="¿Que estas buscando?">
<div id="resultados"></div>

JavaScript

<script type="text/javascript">
      $('#search').on('keyup',function(){
      $value=$(this).val();
        $.ajax({
        type : 'get',
        url : '{{URL::to('search')}}',
        data:{'search':$value},
          success:function(data){
            $('#resultados').html(data);
            }
        });
      })
  </script>
  <script type="text/javascript">
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
  </script>  

<script>
 /* Para quitar resultados buscador y limpiar el input*/
 $(document).on('click', function(e){ 
   if($(e.target) != $("#resultados")) {
       $('#resultados').html('');
       $('#search').val("");
   }
 }); 
</script>

Bien lo que necesito es que si no hay resultado muestre un mensaje de no hay resultados.

Gracias y un saludo

4
  • Ya que estás con jQuery, podrías usar su autocomplete. Ejemplo: es.stackoverflow.com/questions/247518/…
    – Triby
    Commented el 9 jun. 2020 a las 19:13
  • Hola y gracias por tu respuesta @Triby , perdona mi ignorancia pero de que me sirve el autocomplete para que si hago clic fuera ese div se cierre y si no hay resultados me muestre un aviso en ese mismo div?
    – Miguel
    Commented el 9 jun. 2020 a las 19:15
  • Revísalo mientras te sugiero una respuesta.
    – Triby
    Commented el 9 jun. 2020 a las 19:16
  • Vale muchas gracias @Triby
    – Miguel
    Commented el 9 jun. 2020 a las 19:16

1 respuesta 1

1

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 = '<div class="result">';
        $products=DB::table('productos')->where('producto','LIKE','%'.$request->search."%")->get();
        // Verificar que hay resultados para mostrar
        if(count($products) > 0)
        {
            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
        } else {
            $output .= 'No se encontraron resultados';
        } // end if
        $output.='</div>';
        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();
}
// Eliminar resultados si se hace clic fuera
$(document).on('click', function(e){
    // Si el clic es fuera de resultados
    if($(e.target) != $("#resultados")) {
        // 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.

18
  • Hola @Triby . Lo de no se encontraron resultados no lo muestra, sale el div vacio. Y respecto a lo de que se cierren los resultados, justo quiero lo que dices, que al hacer clic en un enlace o en otra parte se cierra, pero no se como utilizar lo que me dices aquí: function linkBusca(item) .....
    – Miguel
    Commented el 9 jun. 2020 a las 19:32
  • Por favor edita la pregunta y agrega el código como lo tienes ahora, para saber por qué no muestra el mensaje. El código Javascript solo colócalo debajo del que tienes para ejecutar la llamada AJAX.
    – Triby
    Commented el 9 jun. 2020 a las 19:46
  • Ya modifique la pregunta @Triby
    – Miguel
    Commented el 9 jun. 2020 a las 20:18
  • Actualicé la respuesta, haciendo que el mensaje "No se encontraron resultados" quede dentro del div y agregué el javascript para cerrar cuando se hace clic fuera de la lista.
    – Triby
    Commented el 9 jun. 2020 a las 20:53
  • Hola @Triby me sigue sin funcionar, se queda el div sin nada y no muestra lo de no se encontraron resultados y lo de hacer clic fuera tampoco funciona, que puede ser..?
    – Miguel
    Commented el 10 jun. 2020 a las 15:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.