2

Estoy implementando un buscador interno de dos tablas de mi base de datos, puedo acceder al link correspondiente cuando presiono click sobre cada item pero si doy enter no ingresa al link que contiene la etiqueta .

Mi HTML

<div class="d-flex justify-content-center">  
     <input id="name" class="form-control search" placeholder="Busqueda por ISBN, nombre recurso o autor" style="width: 25vw">  
</div>

Mi js

$(document).ready(function(){
           $( "#name" ).autocomplete({  
             source: function( request, response ) {  
              $.ajax({  
                url: "{{ route('autocomplete') }}",  
                dataType: "json",  
                data: {  
                    term: request.term  
                },  
                success: function( data ) {  
                    response($.map(data, function(result) {  
                        console.log(result.id)
                        if(result.descripcion == "Escritor"){
                                href = "{{ route('vautores', ['id' => 'parametro']) }}"
                                href = href.replace('parametro', result.id)
                            }else{
                                href = "{{ route('vrecursos', ['id' => 'parametro']) }}"
                                href = href.replace('parametro', result.id)
                            }
                            imgsrc =  "{{asset('parametro')}}"
                            imgsrc = imgsrc.replace('parametro', result.image)
                        return {
                             
                            label: result.label,  
                            value: result.label,  
                            imgsrc: imgsrc,
                            link: href
                            
                        }  
                    }));  
                }  
            });  
             }  
           }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {  
               return $( "<li></li>" )  
                   .data( "item.autocomplete", item )  
                   .append( "<a href='"+ item.link +"'>" + "<img style='width:50px;height:50px' src='" + item.imgsrc + "' /> " + item.label+ "</a>" )  
                   .appendTo( ul );  
           };  
         });  

Quiero acceder al link al dar enter al igual como si funciona con el click.

2
  • No estoy seguro si entiendo bien tu pregunta. Si lo que tratas de hacer es escribir en el input y detectar la tecla enter para finalizar la búsqueda, tal vez las respuestas a esta pregunta te pueden ayudar. En especial la respuesta de @A.Cedano que te muestra opciones con jQuery y JS puro.
    – DjCrazy
    Commented el 11 sept. 2021 a las 14:57
  • Exacto eso lo hago pero no se que acción ejecutar para abrir el enlace, así como cuando doy click sobre el item.
    – kevinrueda
    Commented el 12 sept. 2021 a las 2:20

1 respuesta 1

0

debes de capturar el evento select

    $( ".selector" ).autocomplete({
  select: function( event, ui ) {
console.log(ui)
console.log(event)
//Esto te ayudara a ver la data del elemento seleccionado
}
});

cuando hagas el console.log() alli veras la info del elemento y haras la accion que quieras, como dirigir a un link

 window.href="/new_page"

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.