I have a searchbox on my site that. Currently, users must click the submit button next to the box to search via jquery's post. I would like to let users also press enter to search. How can i do this?
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' />
This question is related to
jquery
jquery-selectors
Take a look at the keypress
function.
I believe the enter
key is 13
so you would want something like:
$('#searchButton').keypress(function(e){
if(e.which == 13){ //Enter is key 13
//Do something
}
});
Something like this will work
$('#usersSearch').keypress(function(ev){
if (ev.which === 13)
$('#searchButton').click();
});
you can use below event of keypress on document load.
$(document).keypress(function(e) {
if(e.which == 13) {
yourfunction();
}
});
Thanks
You call both event listeners using .on()
then use a if
inside the function:
$(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);
});
}
});
});
$('#form').keydown(function(e){
if (e.keyCode === 13) { // If Enter key pressed
$(this).trigger('submit');
}
});
$('#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
}
Source: Stackoverflow.com