2016-04-14 3 views
0

Ich habe ein Suchformular, das ich versuche, dynamisch zu schreiben. Auf Key-up sende ich das Formular. Ich stoße jedoch auf Probleme mit großen Datensätzen. Das Problem besteht darin, dass jede Formularübergabe immer ein Ergebnis zurückgibt und dieses Ergebnis immer in das DOM eingefügt wird. Wenn ich zum Beispiel das vierte Zeichen in keyup eintippe, übergibt es das Formular und gibt 100 übereinstimmende Ergebnisse zurück. Wenn Sie das fünfte Zeichen eingeben, werden nur 2 Ergebnisse zurückgegeben. Die Ausführungszeit des fünften Zeichens kehrt schneller als die vierte zurück. Also was passiert, ist, dass es die 2 Ergebnisse im DOM malt und dann die 4 zurückgibt und die 100 Ergebnisse in das DOM malt.Abbrechen eines früheren Jquery-Formulars beim Übermitteln der Nachricht

Gibt es eine Möglichkeit zum Abbrechen oder Ignorieren der vorherigen Formular-Post-Ergebnisse, wenn ein Keyup-Ereignis nach dem Senden passiert? Hier ist die Form und die einreichen über Javascript

@using (Ajax.BeginForm(new AjaxOptions 
{ 
    HttpMethod = "get", 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "Breweries" 
})) 
{ 
    <input id="brewerySearchInput" class="form-control page-header-input" placeholder="Search" type="search" name="searchTerm" /> 
} 

<script> 
    $("#brewerySearchInput").keyup(function() { 
     if ($(this).val().length >= 3 || $(this).val().length == 0) { 
      $('#form0').delay(200).submit(); 
     } 
    }); 
</script> 

Antwort

1

Ich denke, Ihnen ein klassischer Fall ist debounce Funktion zu verwenden.

Entprellung erzwingt, dass eine Funktion erst wieder aufgerufen wird, nachdem eine bestimmte Zeit verstrichen ist, ohne dass sie aufgerufen wurde. Wie in „führen Sie diese Funktion nur, wenn 100 Millisekunden vergangen sind, ohne sie aufgerufen wird.

werden Sie sonst viele unnötige Backend-Anforderungen machen werden. Check it out https://davidwalsh.name/javascript-debounce-function

+0

BINGO !!! das ist wie ein Zauber! Für Leute hier folgende arbeitete der eingestellte Code ist auf der Basis Beantworten Sie oben, um zu verweisen – JoeyD

0

@bhabisha Kumar diese auf den Kopf genagelt . die Entprellfunktion ist genau das, was ich den Code zu bekommen benötigt. hier arbeiten die abschließende Bearbeitung Code.

<script> 

    function debounce(func, wait, immediate) { 
     var timeout; 
     return function() { 
      var context = this, args = arguments; 
      var later = function() { 
       timeout = null; 
       if (!immediate) func.apply(context, args); 
      }; 
      var callNow = immediate && !timeout; 
      clearTimeout(timeout); 
      timeout = setTimeout(later, wait); 
      if (callNow) func.apply(context, args); 
     }; 
    }; 

    var myEfficientFn = debounce(function() { 
     if ($(this).val().length >= 3 || $(this).val().length == 0) { 
      $('#form0').submit(); 
     } 

    }, 300); 

    $("#brewerySearchInput").keyup(myEfficientFn); 
</script> 
Verwandte Themen