// The autocomplete function is called on the input textbox with id input_element
$("#input_element").autocomplete({
  // minLength is the minimal number of input characters before starting showing
  // the autocomplete
  minLength: 2,
  source: function(request, response) {
    // request is the object that contains the field term which is the users input
    // response is the function that takes the data and calls the render
    // function of the autocomplete
    $.getJSON("/search?q=" + request.term + "&format=json", function(data) {
      // The json object data is returned by the AJAX request
      response(data);
    });
  },
  // This function is executed when a suggestion is selected
  select: function(event, ui) {
    // Sets the text of the input textbox to the title of the object referenced
    // by the selected list item
    $("#input_element").val(ui.item.title);
    return false;
  },
  // This function is executed when the users focuses on a item with the mouse
  // or keyboard
  focus: function(event, ui) {
    // Sets the text of the input textbox to the title of the object referenced
    // by the focused list item
    $("#input_element").val(ui.item.title);
    return false;
  }
// Here we alter the standard behavior when rendering items in the list
}).data("autocomplete")._renderItem = function(ul, item) {
  // ul is the unordered suggestion list
  // item is a object in the data object that was send to the response function
  // after the JSON request
  // We append a custom formatted list item to the suggestion list
  return $("<li></li>").data("item.autocomplete", item).append(
      '<a>' + item.title + ' | ' + item.description + '</a>').appendTo(ul);
};