Al presionar 'enter' en un tipo de entrada = "texto", ¿cómo?

Question

Me enfrenta un problema No puedo resolver JQuery Javascript. ¿Me pueden ayudar a ayudarme understand.First aquí está mi código:

 (...) 

     <script type="text/javascript"> 

     // Autocomplete suggestions 
     $(function() { 
      $("#autoCompInput").autocomplete({ 
       source: "/Suggestions", 
       minLength: 3, 
       select: function (event, ui) { 
        if (ui.item) { 
         $("#autoCompInput").val(ui.item.value); 
         $("form").submit(); 
        } 
       } 
      }); 
     }); 

     // Provide search results 
     $(function() { 
      $("#autoCompSearch").click(function() { 
       var searchParameters = $("#autoCompInput").val(); 

       var jsonData = JSON.stringify(searchParameters, null, 2); 
       window.location = "/Search?criteria=" + searchParameters; 
      }); 
     }); 

    </script> 

    (...) 

    <input class="ui-autocomplete-input" id="autoCompInput" role="textbox" aria-haspopup="true" size="50" autocomplete="off" aria-autocomplete="list" value = "@ViewBag.SearchInfo"/> 
      <a id= "autoCompSearch" href = "#" ><img src="@Url.Content("~/Content/Menu/Images/magnifier.png")" alt="Search" /></a> 

    (...) 

Con este código no puedo usar la tecla 'Enter' para ejecutar mi búsqueda. Cuando el usuario está en la entrada autoCompInput, me gustaría poder detectar si presiona 'enter' e inicia el envío. Leí que debo agregar un evento onkeyup = "onKeyPressed (event)" pero no entiendo cómo escribir el javascipt asociado con el comando. Lo intenté pero sin éxito ... ¿Tienes una solución para mí?

Gracias,

Answer 1

Usted debe unirse el evento de pulsación de tecla a la entrada

$("#autoCompInput").bind("keypress", {}, keypressInBox); 

function keypressInBox(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { //Enter keycode       
     e.preventDefault(); 

     $("yourFormId").submit(); 
    } 
}; 

Answer 2

Para asignar un evento keyup en jQuery

$("#autoCompInput").keyup(function(event) { 
       if (event.keyCode==13) { 
        alert('enter key'); 
       } 
      }); 

Answer 3

Con HTML similar:

<input type="text" id="myTxt" /> 
<input type="submit" id="mySubmit" /> 

Este scr IPT (que utiliza la última jQuery 1.7.2) debe hacerlo:

$('#mySubmit').click(function() { 
    alert('Submitted!'); 
    return false; 
}); 

$('#myTxt').on('keyup', function(e) { 
    if (e.keyCode === 13) { 
     $('#mySubmit').click(); 
    } 
}); 

Aquí hay una working example.

Answer 4

Creo que hay una solución mejor y más estándar para este tipo de problema.

puede tener un formulario GET alrededor de esas entradas y siempre que presione enter en cualquier entrada dentro de ese formulario, se enviará a lo que esté en el atributo de acción del formulario. Esta es la forma en que se vería así (Tomé su código, pero estoy quitando los bits irrelevantes para mi respuesta):

<form id="idForJqueryOnly" action="/Search" method="GET"> 
    <input type="text" name="criteria" value="someuserinput"/> 
    <button type="submit"><img src="...")" alt="Search" /></button> 
</form> 

Este es el comportamiento estándar del navegador. Entonces, ¿qué hace la forma? cuando se envía, el navegador crea una URL como esta: http://yourserverguesedfromthecurrenturl/Search?criteria=someuserinput Lo que sucedió es que el navegador tomó todas las entradas con nombre y valor (y no deshabilitó) del formulario y las serializó en forma de url. Ahora, el evento de envío se puede activar presionando Enter en cualquiera de las entradas dentro, incluidos los botones, siempre que los botones no tengan el tipo de atributo = "botón".

Si quería hacer más cosas con los datos con javascript antes de ir a la página de búsqueda, se puede hacer esto con jQuery:

$("#idForJqueryOnly").submit(function(){ 
    // here you can do stuff like serialize the form, or sanitize the input of tue user. 
    var data = $("#idForJqueryOnly").serialize(); 
    $("[name=criteria]").val($("[name=criteria]").val().customSanitizeMethod()); 

    // if you return false, the form will not submit, say, for validation errors: 
    return customValidator.isFormValid("#idForJqueryOnly"); 
})