StackOverflow Question: jQuery Autocomplete Event

http://stackoverflow.com/questions/25381161/jquery-autocomplete-is-being-triggered-only-once

by klenwell

HTML

Search: <input id="search" class="input_srch_box"  type="text" name="q" value="" maxlength="100" placeholder="placeholder" />
<hr />
<h3>Events</h3>
<ul></ul>

CSS

.bold { font-weight: bold; }

JavaScript

ACC = {}
ACC.autocomplete = {

    bindAll: function () {
        this.bindSearchAutocomplete();
    },

    bindSearchAutocomplete: function () {
        $("#search").autocomplete({
            source: function (request, response) {
                logEvent('source: ' + request.term);
                mockQuery.getJSON('url', {term: request.term.trim()},
                    function (data) {
                        response(data);
                    }
                );
            },
            select: function (event, ui) {
                if (ui.item) {
                    $('#search').val(ui.item.value.trim());
                }
                logEvent('select: ' + ui.item.value, 'bold');
            },
            minLength: 2,
            autoFocus: false
        });
    }

};

ACC.autocomplete.bindAll();


// Mocks a jQuery AJAX call
var mockQuery = {
  getJSON: function(url, postData, callback) {
    var deferred = jQuery.Deferred();
    var responseTime = Math.floor(Math.random() * 400) + 100;
    var data = {autocompleteOptions: []};
    
    setTimeout(function() {
      data = [
        postData.term + ' or ', 
        postData.term + ' and '
      ];
      
      if ( callback) {
        callback(data);
      }
      
      deferred.resolve(data);
    }, responseTime);
    
    return deferred;
  }
};

// Logs autocomplete events
function logEvent(msg, msgClass) {
  console.debug(msg);
  msgClass = (msgClass !== undefined) ? msgClass : 'default';
  $li = $('<li />').addClass(msgClass).text(msg);
  $('ul').append($li);
}