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

Sto provando a creare una piccola casella di ricerca che consente di cercare su Twitter in base alla parola chiave inserita nel campo di inserimento. Mentre funziona, funziona solo se si preme il pulsante Invia. Mi piacerebbe anche essere in grado di premere il tasto Invio o Invio per avviare la ricerca. Ho provato a utilizzare la funzione .sumbit e ad avvolgere il mio input attorno a un elemento del modulo senza successo. Qualsiasi intuizione sarebbe molto apprezzata!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>

fonte

2012-06-01 Alvin Jones

Se effettivamente utilizza un

ho provato questo metodo ma non ho avuto successo. per prima cosa ho avvolto gli elementi HTML in un '' e nel mio jQuery ho usato '$ ('# myFormsID'). submit (function() {'. il risultato non sembra aver fatto nulla. l'ho fatto nel modo sbagliato? –

EDIT: Come Spudley suggerito "uno dei principali punti di utilizzo di jQuery è quello di smettere di dover utilizzare evento attiva incorporato nel markup HTML" così una soluzione migliore sarebbe

<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 - proposta precedente:

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

fonte

2012-06-01 22:45:10

si potrebbe fare ... ma uno dei punti principali dell'utilizzo di jQuery è di interrompere l'uso di trigger di eventi incorporati nel codice HTML. Forse usare l'evento ['keydown()' di jQuery ] (http://api.jquery.com/keydown/) invece? – Spudley

mentre mi piace molto l'idea alla base della soluzione di Cyril, quando ho cercato di implementare la funzione aggiunta ha rotto completamente la funzionalità. Nessun approccio sembrava funzionare. qualcosa qui? –

Io riprendo ... la soluzione funziona! Grazie mille per l'aiuto. –

Se volete posto evento con js non invadente, è possibile utilizzare anche questo sistema:

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

anche se si dispone di un pulsante di invio, si tratta di un'alternativa, #element deve essere il campo di testo in cui si desidera cattura l'evento.

riferimento a questo: answer

fonte

2012-06-01 22:54:14

Prova creare ascoltatori sia per la stampa e mouse click chiave.

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

In azione http://codepen.io/scottyzen/pen/akWPJd

fonte

2016-07-02 00:51:01 Scottyzen

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

risposta

Problemi correlati