2012-02-05 2 views
58

У меня есть поисковый запрос на моем сайте. В настоящее время пользователи должны нажать кнопку отправки рядом с полем для поиска по почте jquery. Я бы хотел, чтобы пользователи также нажимали enter для поиска. Как я могу это сделать?Запуск события на `click` и` enter`

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' /> 
+2

Престола здесь: http://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery – mowwwalker

+0

Yup, функция поиска полезна ... – elclanrs

ответ

87

Используйте keypress событие на usersSearch текстовое поле и искать Введите кнопку. Если нажать кнопку «Ввод», то запустите событие нажатия кнопки поиска, которое будет выполнять остальную работу. Попробуй это.

$('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

+1

Еще лучше: используйте событие keyup, чтобы гарантировать, что ваша функция запускается только один раз. Спасибо @StevePaulo за его комментарий в [этом ответе] (http://stackoverflow.com/a/155263/461544). – steps

+1

Недостаток использования ключа, который я только что обнаружил: вы не сможете предотвратить действие по умолчанию, потому что событие keyup запускается только _after_ действие по умолчанию для ключа выполнено (см. [Здесь] (http: // www.quirksmode.org/dom/events/keys.html)). – steps

5

Что-то, как это будет работать

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

но как я могу использовать оба, нажать поиск или нажать enter? – kirby

+1

Вы добавили код, который я добавил, помимо кода, который у вас уже есть. Тогда оба будут работать. – jopke

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

Это сработало для меня :) –

0

Посмотрите на keypressfunction.

Я считаю, что ключ enter является 13 так что вы хотели бы что-то вроде:

$('#searchButton').keypress(function(e){ 
    if(e.which == 13){ //Enter is key 13 
     //Do something 
    } 
}); 
1
$('#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 
} 
40

Вы называете обоих слушателей событий с помощью .on() затем использовать if внутри функции:

$(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); 
     }); 
    } 
    }); 
}); 
+8

Почему этот ответ не получает больше голосов? Я имею в виду, что это меньшие блоки кода (например, чтобы не добавлять другое событие, чтобы вызвать щелчок). Любая минус этого? –

+4

Этот ответ лучше, чем принято – sagarthapa

+0

Поистине, Nin-ya & sagarthapa. –