Erhalten Sie Text aus dem Feld auf keyup, aber mit Verzögerung zur weiteren Typisierung

Question

Ich habe eine Form, die entfernt vorgelegt wird, wenn die verschiedenen Elemente ändern. Auf einem Suchfeld insbesondere verwende ich einen keyup zu erkennen, wenn der Text im Feld ändert. Das Problem dabei ist, dass, wenn jemand Typen „Huhn“, dann die Form siebenmal vorgelegt wird, wobei nur die letzte Zählung.

Was wäre besser so etwas wie dies

• keyup erkannt - Start warten (eine Sekunde)

• ein weiterer keyup erkannt - Neustart Wartezeit

• Warte beendet - Wert erhalten und einreichen Form

, bevor ich gehe weg und Code meine eigene Version von dieser (ich bin wirklich ein Back-End-Typ mit nur wenig js, verwende ich jQuery für alles), gibt es bereits eine bestehende Lösung für dieses? Es scheint, wie es eine häufige Anforderung wäre. Ein jQuery-Plugin vielleicht? Wenn nicht, was ist der einfachste und beste Weg, um Code das?

UPDATE - aktuelle Code hinzugefügt Dan (unten)

Dan - dies kann relevant sein. Einer der jQuery-Plugins verwende ich auf der Seite (tablesorter) hat diese Datei - „tablesorter / jquery-latest.js“, die, wenn sie enthalten ist, führt zu den gleichen Fehler mit dem Code nach wie vor:

  

jQuery ( "input # search"). Daten ( "Timeout", null) ist nicht definiert   http: //192.168.0.234/javascripts/main.js 1264084467   Zeile 11

Vielleicht ist es eine Art von Konflikt zwischen verschiedenen jQuery Definitionen? (Oder etwas)

$(document).ready(function() {
  //initiate the shadowbox player
//  Shadowbox.init({
//    players:  ['html', 'iframe']
//  });
}); 

jQuery(function(){
  jQuery('input#search')
    .data('timeout', null)
    .keyup(function(){
      jQuery(this).data('timeout', setTimeout(function(){
          var mytext = jQuery('input#search').val();
          submitQuizForm();
          jQuery('input#search').next().html(mytext);
        }, 2000)
     )
     .keydown(function(){
       clearTimeout(jQuery(this).data('timeout'));
     });
    });
});

function submitQuizForm(){
  form = jQuery("#searchQuizzes");
  jQuery.ajax({
    async:true, 
    data:jQuery.param(form.serializeArray()), 
    dataType:'script', 
    type:'get', 
    url:'/millionaire/millionaire_quizzes',
    success: function(msg){ 
     // $("#chooseQuizMainTable").trigger("update"); 
    }
  }); 
  return true;
}

Answer 1

Leider habe ich nicht getestet und es ist ein bisschen aus der Spitze von meinem Kopf, aber etwas in diese Richtung sollte hoffentlich den Trick. Ändern Sie die 2000 jedoch viele Millisekunden benötigen Sie zwischen Server Beiträge

<input type="text" id="mytextbox" style="border: 1px solid" />
<span></span>

<script language="javascript" type="text/javascript">
    jQuery(function(){
      jQuery('#mytextbox')
        .data('timeout', null)
        .keyup(function(){
            clearTimeout(jQuery(this).data('timeout'));
            jQuery(this).data('timeout', setTimeout(submitQuizForm, 2000));
        });
    });
</script>

Answer 2

Hier ist Ihre Phantasie jQuery-Erweiterung:

(function($){

$.widget("ui.onDelayedKeyup", {

    _init : function() {
        var self = this;
        $(this.element).keyup(function() {
            if(typeof(window['inputTimeout']) != "undefined"){
                window.clearTimeout(inputTimeout);
            }  
            var handler = self.options.handler;
            window['inputTimeout'] = window.setTimeout(function() {
                handler.call(self.element) }, self.options.delay);
        });
    },
    options: {
        handler: $.noop(),
        delay: 500
    }

});
})(jQuery);

Verwenden Sie es wie folgt:

    $("input.filterField").onDelayedKeyup({
        handler: function() {
            if ($.trim($(this).val()).length > 0) {
                //reload my data store using the filter string.
            }
        }
    });

Gibt es eine halbe Sekunde Verzögerung in der Standardeinstellung.

Answer 3

Als Update endete ich mit diesem auf die gut zu funktionieren scheint:

function afterDelayedKeyup(selector, action, delay){
  jQuery(selector).keyup(function(){
    if(typeof(window['inputTimeout']) != "undefined"){
      clearTimeout(inputTimeout);
    }  
    inputTimeout = setTimeout(action, delay);
  });
}

ich diese dann rufen Sie von der Seite in document.ready Block Frage mit

  afterDelayedKeyup('input#search',"submitQuizForm()",500)

Was wäre schön, wäre ein neues jquery Ereignis zu machen, die diese Logik verwendet, zB .delayedKeyup neben .keyup zu gehen, so dass ich nur so etwas wie dies für eine einzelne Seite der document.ready Block sagen konnte.

  jQuery('input#search').delayedKeyup(function(){
    submitQuizForm();
  });

Aber, ich weiß nicht, wie auf diese Weise anpassen jquery. Das ist eine nette Hausaufgaben Aufgabe though.

Answer 4

Gute Arbeit, Max, die sehr hilfreich für mich war! Ich habe eine leichte Verbesserung auf Ihre Funktion gemacht, indem es allgemeiner:

function afterDelayedEvent(eventtype, selector, action, delay) {
    $(selector).bind(eventtype, function() {
        if (typeof(window['inputTimeout']) != "undefined") {
            clearTimeout(inputTimeout);
        }
        inputTimeout = setTimeout(action, delay);
    });
}

Auf diese Weise können sie für jede Art von Veranstaltung nutzen können, obwohl keyup ist wahrscheinlich der nützlichste hier.

Answer 5

Ich weiß, das ist alt, aber es war eines der ersten Ergebnisse, wenn ich war auf der Suche nach, wie so etwas zu tun, so dass ich, obwohl ich meine Lösung teilen. Ich verwenden eine Kombination der Antworten zu bekommen, was ich davon benötigt werden.

Ich wollte ein benutzerdefiniertes Ereignis, das ebenso wie die bestehenden jQuery Ereignisse gearbeitet, und es benötigte, um die Arbeit mit keypress + löschen, Backspace und eingeben.

Hier ist meine jQuery-Plugin:

$.fn.typePause = function (dataObject, eventFunc)
    {
        if(typeof dataObject === 'function')
        {
            eventFunc = dataObject;
            dataObject = {};
        }
        if(typeof dataObject.milliseconds === 'undefined')
            dataObject.milliseconds = 500;
        $(this).data('timeout', null)
            .keypress(dataObject, function(e)
            {
                clearTimeout($(this).data('timeout'));
                $(this).data('timeout', setTimeout($.proxy(eventFunc, this, e), dataObject.milliseconds));
            })
            .keyup(dataObject, function(e)
            {
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code == 8 || code == 46 || code == 13)
                    $(this).triggerHandler('keypress',dataObject);
            });
    }

habe ich $.proxy() den Kontext, in dem Fall zu erhalten, obwohl es könnte ein besserer Weg, dies zu tun, Performance-weise.

Um dieses Plugin zu bedienen, einfach tun:

$('#myElement').typePause(function(e){ /* do stuff */ });

oder

$('#myElement').typePause({milliseconds: 500, [other data to pass to event]},function(e){ /* do stuff */ });