StackOverflow Question: jQuery Autocomplete

http://stackoverflow.com/questions/25339305/jquery-ui-autocomplete-parsing-data

HTML

Search: <input id="search-word" />
<hr />
<h3>Events</h3>
<ul></ul>

CSS

.bold { font-weight: bold; }

JavaScript

$('#search-word').autocomplete({
  source: function(request, response) {
    // Mocks AJAX request for data to populate autocomplete
    var url = '/search/autocomplete';
    var postData = {input: request.term};
    mockQuery.getJSON(url, postData, function(data) {
      response(data.autocompleteOptions);
    });
    
    logEvent('source: ' + request.term);
  },
  formatResult: function(a, b, c){
  	console.log(a, b, c);
  },
    
  select: function(event, ui) {
    logEvent('select: ' + ui.item.value, 'bold');
    // Do whatever else.
  }
});


// Mocks a jQuery AJAX call
var mockQuery = {
  getJSON: function(url, postData, callback) {
    var deferred = jQuery.Deferred();
    var responseTime = Math.floor(Math.random() * (500 - 100 + 1)) + 100;
    var data = {autocompleteOptions: []};
    
    setTimeout(function() {
      data.autocompleteOptions = [
        postData.input + ' or ', 
        postData.input + ' 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);
}