<div id="project-label">Select a project (type "s" for a start):</div>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>

$(function() {
  //random json values
  var projects =  [{ id: 1, value: "Thomas", cp: 134 }, { id: 65, value: "Richard", cp: 1743 }, { id: 235, value: "Harold", cp: 7342 }, { id: 78, value: "Santa Maria", cp: 787 }, { id: 75, value: "Gunner", cp: 788 }, { id: 124, value: "Shad", cp: 124 }, { id: 1233, value: "Aziz", cp: 3544 }, { id: 244, value: "Buet", cp: 7847 }];



  // define UI behavior methods

  function _renderMenu(ul, items) {
    var self = this;
    //table definitions
    ul.append("<table border=1><thead><tr><th>ID#</th><th>Name</th><th>Cool&nbsp;Points</th></tr></thead><tbody></tbody></table>");
    $.each(items, function(index, item) {
      self._renderItemData(ul, ul.find("table tbody"), item);
    });
  }

  function _renderItemData(ul, table, item) {
    return this._renderItem(table, item).data("ui-autocomplete-item", item);
  };

  function _renderItem(table, item) {
    return $("<tr class='ui-menu-item' role='presentation'></tr>")
      //.data( "item.autocomplete", item )
      .append("<td >" + item.id + "</td>" + "<td>" + item.value + "</td>" + "<td>" + item.cp + "</td>")
      .appendTo(table);
  };

  function _doFocusStuff(event, ui) {
    console.log(ui)
    /* if(typeof(ui.item)=="undefined")
    {
            event.preventDefault();
            event.stopPropagation();
            return false;

    }*/

    console.log(ui.item.value);
    $("#project").val(ui.item.value);
    $("#project-id").val(ui.item.id);
    $("#project-description").html(ui.item.cp);
    return false;
  }

  // create the autocomplete
  var autocomplete = $("#project").autocomplete({
    minLength: 1,
    source: projects,
    focus: _doFocusStuff
  });

  // get a handle on it's UI view
  var autocomplete_handle = autocomplete.data("ui-autocomplete");

  //overriding jquery-ui.autocomplete .js functions
  autocomplete_handle._renderMenu = _renderMenu;
  autocomplete_handle._renderItemData = _renderItemData;
  autocomplete_handle._renderItem = _renderItem;

});