jQuery UI Comportamiento de autocompletado. ¿Cómo buscar texto gratis en Entrar?

Question

primera pregunta (y afortunadamente, pero dudoso la única)

Estoy usando el autocompletado de la jQuery UI. Aquí hay un código de muestra para replicar mi problema.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 

$("#autocomplete").autocomplete({ 
    source: suggestions 
}); 

Cuando un usuario escribe 'J' que se presentará con 'Clojure' y 'JavaScript' como sugerencias.

He omitido Java de esta lista, si el usuario desea buscar Java, escribe 'Java', presione la tecla enter, pero el formulario no se envía. Si agrega un espacio, la sugerencia de "JavaScript" desaparece y el formulario se puede enviar presionando la tecla Intro.

Estoy creando una búsqueda gratuita, quiero que los usuarios puedan buscar presionando enter, incluso si hay sugerencias disponibles.

$("#autocomplete").keypress(function(event) { 
    alert(event.keyCode); 
    if (event.keyCode=='13') $this.closest('form').submit(); 
}); 

He probado el pensamiento anterior pude detectar manualmente al pulsar una tecla enviar y enviar el formulario, pero la alerta muestra todas las claves se detectan SALVO presentar lo que parece ser suprimida por el autocompletar.

¡Cualquier ayuda es muy apreciada! Gracias.

Answer 1

ACTUALIZACIÓN

me tuvieron que hacer algunos cambios, pero este código funciona bien en mi lado después de hacer eso. Primero, e.keycode debe ser e.keyCode. No pensé que el caso importara, pero lo hace. Además, asegúrese de no citar el 13 cuando compruebe que el código de clave sea el botón Intro. No funcionará correctamente si lo haces. Aquí está el nuevo código:

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keyCode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

---

La función de pulsación de tecla debe ser similar a continuación, y también, se pueden encadenar el autocompletar y las funciones de pulsación de teclas para que sea más fácil para usted. El siguiente código debería funcionar.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keycode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

Answer 2

suprime Autocompletar someten pero esto funcionó como una solución para mí:

jQuery.fn.go_url = function(id) { 
    var url="gl10.pl?ar=2010&listi=ts&niv=stovnsnr&rl=1290693052914&stovnsnr=replaceme"; 
    var ok; 
    if (ok=id.match(/^\d{6}$/)) { 
     url=url.replace(/replaceme/g,id); 
     location=url; 
    } 
} 
jQuery(function() { 
    jQuery("#stovnar").autocomplete({ 
     source: "autocomplete.pl?pname=stovnsnr", 
     minLength: 3, 
     select: function(event, ui) { if (ui.item) { jQuery.fn.go_url(ui.item.id); } } 
    }); 
}).keypress(function(e) { 
    if (e.keyCode === 13) { 
     v=jQuery("#stovnar").val(); 
     jQuery.fn.go_url(v) 
    } 
}); 

Answer 3

Usando la versión plug-in de interfaz de usuario de autocompletar 1.8.5:

Busque este trozo de código

"case d.ENTER: case d.NUMPAD_ENTER: a.menu.element.is (": visible ") & & c.preventDefault();"

y eliminarlo o comentarlo.

Esencialmente lo que se dijo anteriormente pero de la versión actual del complemento.

aplausos

Pete

Answer 4

Esto es lo que hice

<div class="ui-widget"> 
    <form action="javascript:alert('hey run some javascript code')"> 
     <input id="search" /> 
    </form> 
</div> 

Answer 5

que tenía el mismo problema, y ​​estaba pensando en usar la validación de lograr esto, pero al final mi solución parece una mucho más fácil que otras soluciones en esta página:

1. Hacer una entrada fi campo para escribir el texto, llamado #input y una entrada oculta llamada #hiddeninput. Su motor de búsqueda deberá usar el valor #hiddeninput.

2. Dentro de su función de autocompletar, establezca el valor de #hiddeninput a request.term: (fijo esto dentro $.ajax({ success: }))

$ ("# HiddenInput de entrada") val (request.term.);

1. Establecer la función de autocompletar con el selecto: -method para llenar el campo oculto con la sugerencia de que se elija:

select: function(event, ui) { 
    $("input#input").val(ui.item.label), 
    $("input#hiddeninput").val(ui.item.nr), 
    //Auto-submit upon selection 
    $(this).closest("form").submit(); 
} 

Ahora su búsqueda se realizará en lo el usuario ha escrito hasta que selecciona algo de la lista de sugerencias.

Answer 6

Tuve un problema similar, el widget de autocompletar jquery-ui dispara el evento seleccionado cuando el usuario selecciona una sugerencia de la lista, si se hizo clic en la sugerencia seleccionada o se presionó la tecla enter. Pero no hizo nada si el usuario escribió texto y presionó la tecla enter sin seleccionando un elemento de la lista. Cuando eso sucede, necesito hacer una búsqueda.

Fue fácil agregar un controlador de eventos keypress, pero se activó si se realizó o no una selección. Entonces agregué una variable, didSelect, para mantener el estado de selección.

Aquí está la solución completa:

$(function() { 
var didSelect = false; 

$("#search").autocomplete({ 
    source: "/my_remote_search", 
    minLength: 2, 
    search: function (event, ui) { 
     didSelect = false; 
     return true; 
    }, 
    select: function(event, ui) { 
     if (ui.item) { 
      didSelect = true; 
      my_select_function(ui.item); 
     } 
    } 
}).keypress(function(e) { 
    if (e.keyCode == 13) { 
     if (! didSelect) { 
      my_search_function($("#search").val()); 
     } 
    } 
}); 

});

Answer 7

<script> 
    $(function() { 
     $('#student').autocomplete({ 
      source: '../ajx/student_list.php', 
      minLength: 3, 
      response: function(event, ui) { 
       $('#student_id').val(ui.content[0].id); 
      }, 
      select: function(event, ui) { 
       $('#student_id').val(ui.item.id); 
       $(this).closest('form').trigger('submit'); 
      } 
     }).keypress(function(e) { 
      if (e.keyCode === 13) { 
       $(this).closest('form').trigger('submit'); 
      } 
     }); 
    }); 
</script> 
<div> 
    <form action='../app/student_view.php'> 
     <input name='student_id' id='student_id' type='hidden' value=''> 
     <label for='student'>Student: </label> 
     <input id='student' /> 
    </form> 
</div> 

Aquí he usado autocompletar para buscar un estudiante. Si el usuario presionó ENTER, el formulario se enviaría, incluso si no se seleccionó nada de la lista. El evento 'respuesta' actualizaría el valor de un campo de entrada oculto con el primer elemento de la lista. También pueden hacer clic o seleccionar de la lista.