Activar un evento en `clic` y` enter`

Question

Tengo un cuadro de búsqueda en mi sitio que. Actualmente, los usuarios deben hacer clic en el botón Enviar junto al cuadro para buscar a través de la publicación de jquery. Me gustaría que los usuarios también presionen Enter para buscar. ¿Cómo puedo hacer esto?

JQUERY:

$('document').ready(function(){ 
    $('#searchButton').click(function(){ 
     var search = $('#usersSearch').val(); 
     $.post('../searchusers.php',{search: search},function(response){ 
      $('#userSearchResultsTable').html(response); 
     }); 
    }); 
}); 

HTML:

<input type='text' id='usersSearch' /><input type='button' id='searchButton' value='search' /> 

Answer 1

Uso keypress evento en usersSearch cuadro de texto y busque Introduzca botón. Si se presiona el botón Entrar, active el evento de clic del botón de búsqueda que hará el resto del trabajo. Prueba esto.

$('document').ready(function(){ 
    $('#searchButton').click(function(){ 
     var search = $('#usersSearch').val(); 
     $.post('../searchusers.php',{search: search},function(response){ 
      $('#userSearchResultsTable').html(response); 
     }); 
    }) 
    $('#usersSearch').keypress(function(e){ 
     if(e.which == 13){//Enter key pressed 
      $('#searchButton').click();//Trigger search button click event 
     } 
    }); 

}); 

Demo

Answer 2

Algo como esto va a funcionar

$('#usersSearch').keypress(function(ev){ 
    if (ev.which === 13) 
     $('#searchButton').click(); 
}); 

Answer 3

$('#form').keydown(function(e){ 
    if (e.keyCode === 13) { // If Enter key pressed 
     $(this).trigger('submit'); 
    } 
}); 

Answer 4

Tome un vistazo a la keypressfunction.

Creo que la clave enter es 13 por lo que querría algo así como:

$('#searchButton').keypress(function(e){ 
    if(e.which == 13){ //Enter is key 13 
     //Do something 
    } 
}); 

Answer 5

$('#usersSearch').keyup(function() { // handle keyup event on search input field 

    var key = e.which || e.keyCode; // store browser agnostic keycode 

    if(key == 13) 
     $(this).closest('form').submit(); // submit parent form 
} 

Answer 6

Se llama a los dos detectores de eventos utilizando .on() luego usar un if dentro de la función:

$(function(){ 
    $('#searchButton').on('keypress click', function(e){ 
    var search = $('#usersSearch').val(); 
    if (e.which === 13 || e.type === 'click') { 
     $.post('../searchusers.php', {search: search}, function (response) { 
     $('#userSearchResultsTable').html(response); 
     }); 
    } 
    }); 
});