jQuery function execute on Button Click and Enter/Return (key)

Estoy tratando de crear un pequeño cuadro de búsqueda que te permita buscar Twitter basado en la palabra clave que ingresas en el campo de entrada. Si bien es un trabajo, solo funciona si presiona el botón Enviar. También me gustaría poder presionar la tecla Enter o Return para iniciar la búsqueda. Intenté usar la función .sumbit y envolver mi entrada alrededor de un elemento de formulario sin éxito. ¡Cualquier idea sería muy apreciada!jQuery function execute on Button Click and Enter/Return (key)

<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>

Fuente

2012-06-01 Alvin Jones

Si usted utiliza realmente un elemento ''

intenté este método pero no tuve éxito. primero envolví los elementos HTML en '' y en mi jQuery usé '$ ('# myFormsID'). submit (función() {'. el resultado no pareció hacer nada. ¿Lo hice de la manera incorrecta? –

EDIT: Como Spudley sugirió "uno de los principales puntos de la utilización de jQuery es dejar de tener que utilizar los activadores de evento incrustado en el código HTML" por lo que una solución mejor sería

<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>

O - propuesta anterior:

<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true" >

Fuente

2012-06-01 22:45:10

que podría hacer ... pero uno de los puntos principales de usar jQuery es evitar que tenga que usar activadores de eventos incrustados en el marcado HTML. Tal vez use el evento de jQuery ['keydown()' ] (http://api.jquery.com/keydown/) en su lugar? – Spudley

mientras que realmente me gusta la idea detrás de la solución de Cyril, cuando traté de implementar la función agregada, rompió completamente la funcionalidad. Ninguno de los dos enfoques pareció funcionar. algo aquí? –

Lo llevo de vuelta ... la solución funciona! Muchas gracias por la ayuda. –

Si quieren lugar del acontecimiento con js no entrometido, puede utilizar también este sistema:

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

también si tiene un botón de envío, esta es una alternativa, #element debe ser el campo de texto en el que desea captura el evento.

referencia a esto: answer

Fuente

2012-06-01 22:54:14

Trate crear detectores para ambas claves de prensa y clics del ratón.

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

En la acción http://codepen.io/scottyzen/pen/akWPJd

Fuente

2016-07-02 00:51:01 Scottyzen

jQuery function execute on Button Click and Enter/Return (key)

Respuesta

Cuestiones relacionadas