funzione jQuery eseguire sul Pulsante e fare Clic su “Invio” (chiave)

Sto cercando di creare una piccola casella di ricerca che permette di cercare su Twitter in base alla parola chiave che ti entra nel campo di immissione. Mentre funziona, funziona solo se si preme il pulsante di invio. Vorrei anche essere in grado di premere il tasto Invio per avviare la ricerca. Ho provato con il .compila la funzione e avvolgere il mio ingresso intorno a un elemento di un modulo con, senza successo. Comprensione sarebbe apprezzo molto!

<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>
  • Se si utilizza un <form> elemento, potrai catturare il return/enter automaticamente la chiave ed essere in grado di utilizzare il $.submit() gestore, ma presumo che tu stia usando AJAX?
  • ho provato questo metodo, ma mi è riuscito. prima ho avvolto elementi HTML in un <form action=""> e nel mio jQuery ho usato $('#myFormsID').submit(function(){. il risultato non sembra fare nulla. mi ha fatto andare su di esso nel modo sbagliato?

 

3 Replies
  1. 14

    EDIT: Come Spudley suggerito “uno dei punti principali dell’utilizzo di jQuery, è smettere di dover utilizzare l’evento di trigger incorporato nel markup HTML”, in modo che la 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 – Precedente proposta:

    <input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"  >
    • si potrebbe fare… ma uno dei punti principali dell’utilizzo di jQuery, è smettere di dover utilizzare l’evento di trigger incorporato nel markup HTML. Forse l’uso di jQuery, keydown() evento invece?
    • mentre mi piace molto l’idea di Cirillo soluzione, quando ho provato a implementare la funzione aggiunta si è rotto completamente la funzionalità. Né l’approccio sembrava funzionare. Qualsiasi mi manca qualcosa qui?
    • Prendo di nuovo… la soluzione funziona! La ringrazio molto per l’aiuto.
  2. 5

    Se si desidera luogo evento non invadente js quindi è possibile utilizzare anche questo sistema:

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

    anche se si dispone di un pulsante di invio, questa è un’alternativa, #l’elemento deve essere il campo di testo in cui si desidera intercettare l’evento.

    riferimento a questo: risposta

  3. 0

    Provare a creare un listener per entrambi, premere un tasto del mouse.

    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

Lascia un commento