Debounce ajax requests

The AJAX requests really need to be debounced. Here are the requests that the server gets without any kind of debouncing:

[05/Nov/2013 18:21:59] "GET /autocomplete/AutocompleteUpdateProduct/?q=h HTTP/1.1" 200 1563
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=he HTTP/1.1" 200 1350
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=hel HTTP/1.1" 200 432
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=hell HTTP/1.1" 200 50
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello HTTP/1.1" 200 50
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+ HTTP/1.1" 200 50
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my HTTP/1.1" 200 50
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+ HTTP/1.1" 200 50
[05/Nov/2013 18:22:00] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+d HTTP/1.1" 200 50
[05/Nov/2013 18:22:01] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+dea HTTP/1.1" 200 50
[05/Nov/2013 18:22:01] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+dear+ HTTP/1.1" 200 50
[05/Nov/2013 18:22:01] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+dear+pr HTTP/1.1" 200 50
[05/Nov/2013 18:22:02] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+dear+pro HTTP/1.1" 200 50
[05/Nov/2013 18:22:02] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+dear+prod HTTP/1.1" 200 50
[05/Nov/2013 18:22:02] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+dear+produc HTTP/1.1" 200 50
[05/Nov/2013 18:22:02] "GET /autocomplete/AutocompleteUpdateProduct/?q=hello+my+dear+product HTTP/1.1" 200 50

You can easily add debouncing by using Ben Alman’s debounce/throttle jquery plugin: http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

I suggest the following change to templates/autocomplete_light/static.html and add Ben’s plugin:

{% load static %}

{% include 'autocomplete_light/_ajax_csrf.html' %}

<script type="text/javascript" src="{% static 'autocomplete_light/jquery.ba-throttle-debounce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'autocomplete_light/autocomplete.js' %}"></script>
<script type="text/javascript" src="{% static 'autocomplete_light/widget.js' %}"></script>
<script type="text/javascript" src="{% static 'autocomplete_light/addanother.js' %}"></script>
<script type="text/javascript" src="{% static 'autocomplete_light/text_widget.js' %}"></script>
<script type="text/javascript" src="{% static 'autocomplete_light/remote.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'autocomplete_light/style.css' %}" />

Then you can simply modifiy the initialize method of the autocomplete.js to something like this:

yourlabs.Autocomplete.prototype.initialize = function() {
    // Set the HTML placeholder attribute on the input.
    this.input.attr('placeholder', this.placeholder);

    this.input
        .on('blur.autocomplete', $.proxy(this.inputBlur, this))
        .on('click.autocomplete', $.proxy(this.inputClick, this))
        .on('keypress.autocomplete', $.proxy(this.inputKeypress, this))
        .on('keyup.autocomplete', $.debounce( 250, $.proxy(this.inputKeyup, this)))
        .on('keydown.autocomplete', $.proxy(this.inputKeydown, this))

    /*
    Bind mouse events to fire signals. Because the same signals will be
    sent if the user uses keyboard to work with the autocomplete.
     */
    this.box
        .on('mouseenter', this.choiceSelector, $.proxy(this.boxMouseenter, this))
        .on('mouseleave', this.choiceSelector, $.proxy(this.boxMouseleave, this))
        .on('click', this.choiceSelector, $.proxy(this.boxClick, this))

    /*
    Initially - empty data queried
    */
    this.data[this.queryVariable] = '';
}

Note the only change is the added $.debounce(250, …)

This ultimately leads to only one request being sent:

[05/Nov/2013 18:38:43] "GET /autocomplete/AutocompleteUpdateProduct/?q=This+is+my+product HTTP/1.1" 200 50

The difference is not noticeable to the user.

[thongly]

Just adding a comment for people looking into this with recent versions of select2 and DAL. The attribute to use is delay, and the way to pass this through from DAL to select2 is via the data attributes (such as via the widgets in the class meta - see docs)

For example.

                attrs={
                    "data-ajax--delay": "700" // <-- NOTICE THE DOUBLE (i.e. "--") SEPARATOR HERE!!!
                }

[jpic]

Np, thanks for your great feedback !