Функция jQuery выполняется по нажатию кнопки и вводу / возврату (клавиша)

Я пытаюсь создать небольшое окно поиска, которое позволит вам искать в Twitter по ключевому слову, которое вы вводите в поле ввода. Хотя это работает, оно работает только при нажатии кнопки «Отправить». Я также хотел бы иметь возможность нажать клавишу Enter или Return, чтобы начать поиск. Я пытался использовать функцию .sumbit и обернуть ввод вокруг элемента формы, но безуспешно. Любое понимание будет очень признателен!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$(document).ready(function(){

function(data) {

$('#startSearch').click(function(){ 

$('#tweets .results').remove();

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'

    $.getJSON(searchTerm,  function(data) {
        $.each(data.results, function() {
            $('<div class="results"></div>')
            .hide()
            .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">'  + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
            .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
            .append('<span class="userText">' + this.text + '</span>')
            .append('<time class="textTime">' + relTime(this.created_at) + '</time>')
            .appendTo('#tweets')
            .fadeIn();

        });

  });

</script>

<body>


<label id="searchLabel" for="twitterSearch">Search</label>
<input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true">
<input id="startSearch" type="submit">

<datalist id="searchSugg">
<option value="css3 mulitple backgrounds">
<option value="html5 video">
<option value="responsive web design">
<option value="twitter api">
</datalist>

<div id="tweets">
</div>
</body>
 Jared Farrish02 июн. 2012 г., 00:42
Если вы на самом деле используете<form> элемент, вы 'захватитеreturn/enter ключ автоматически и сможете использовать$.submit() обработчик, но я предполагаю, что вы используете AJAX?
 Alvin Jones02 июн. 2012 г., 21:35
Я попробовал этот метод, но мне не удалось. Сначала я обернул элементы HTML в<form action=""> и в моем JQuery я использовал$('#myFormsID').submit(function(){, результат, похоже, ничего не сделал. я поступил неправильно?

Ответы на вопрос(3)

Решение Вопроса

РЕДАКТИРОВАТЬ: Как предложил Спудли, «одним из основных моментов использования jQuery является прекращение использования триггеров событий, встроенных в разметку HTML». так что лучшим решением будет

<script>
$(document).ready(function(){

function(data) {

$('#twitterSearch').keydown(function(event){    
    if(event.keyCode==13){
       $('#startSearch').trigger('click');
    }
});

$('#startSearch').click(function(){ 

$('#tweets .results').remove();

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'

    $.getJSON(searchTerm,  function(data) {
        $.each(data.results, function() {
            $('<div class="results"></div>')
            .hide()
            .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">'  + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
            .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
            .append('<span class="userText">' + this.text + '</span>')
            .append('<time class="textTime">' + relTime(this.created_at) + '</time>')
            .appendTo('#tweets')
            .fadeIn();

        });

  });

</script>

ИЛИ - Предыдущее предложение:

<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"  >
 Alvin Jones02 июн. 2012 г., 21:45
в то время как мне действительно нравится идея, лежащая в основе решения Сирила, когда я пытался реализовать добавленную функцию, она полностью нарушала функциональность. Ни один из подходов, похоже, не сработал. Я что-то упустил здесь?
 Alvin Jones02 июн. 2012 г., 22:50
Я забираю это назад ... решение работает! Огромное спасибо за помощь.
 02 июн. 2012 г., 00:52
Вы могли бы сделать ... но один из основных моментов использования jQuery состоит в том, чтобы прекратить вам использовать триггеры событий, встроенные в разметку HTML. Может быть, использовать JQuerykeydown() event вместо?

Попробуйте создать слушателей как для нажатия клавиш, так и для щелчков мышью.

function myFunction(e){
    if (e.which=='13' || e.type=='click'){
        // Run your code here
    }
}
$(document)
  .on('click', '#startSearch', myFunction)
  .on('keypress', this, myFunction);

В бою http://codepen.io/scottyzen/pen/akWPJd

Если вы хотите разместить событие с не навязчивым js, то вы можете использовать также эту систему:

$("#element").keydown(function(event) {
if (event.keyCode == 13) {
    // do stuff
}

также, если у вас есть кнопка отправки, это альтернатива, #element должно быть текстовым полем, в котором вы хотите перехватить событие.

ссылка на это:ответ

Ваш ответ на вопрос