title: Hide column in jQuery MultiColumn Autocomplete
body: <p>I have a fine working jquery multicolumn autocomplete. Now i have to add a column which should be hidden. Basically its a ID of the values. So when the user selects the value i could able to get the ID of the selected row.</p>
  
  <p>//Code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      var autocompleteSource;
      var colValues = [];
      var columns = [{ name: 'Workflow Name', width: '200px' }, { name: 'Workflow Category', width: '150px' }, { name: 'Status', width: '100px' }, { name: 'Workflow Owner', width: '150px' }];
  
      $.ajax({
          url: "/Home/LoadWorkflowDropdown",
          datatype: 'json',
          mtype: 'GET',
          success: OnComplete,
          error: OnFail
      });
      function OnComplete(result) {
  
          autocompleteSource = $.parseJSON(result)
          $.each(autocompleteSource, function () {
  
              colValues.push([this.WorkflowName, this.WorkflowCategory, this.StatusName, this.UserName]);
          });
  
          $.widget('custom.mcautocomplete', $.ui.autocomplete, {
  
              _renderMenu: function (ul, items) {
                  var self = this,
                      thead;
  
                  if (this.options.showHeader) {
                      table = $('&lt;div class="ui-widget-header" style="width:100%"&gt;&lt;/div&gt;');
                      $.each(this.options.columns, function (index, item) {
                          table.append('&lt;span style="padding:0 4px;float:left;width:' + item.width + ';"&gt;' + item.name + '&lt;/span&gt;');
                      });
                      table.append('&lt;div style="clear: both;"&gt;&lt;/div&gt;');
                      ul.append(table);
                  }
                  $.each(items, function (index, item) {
                      self._renderItem(ul, item);
                  });
              },
              _renderItem: function (ul, item) {
                  var t = '',
                      result = '';
  
                  $.each(this.options.columns, function (index, column) {
                      t += '&lt;span style="padding:0 4px;float:left;width:' + column.width + ';"&gt;' + item[column.valueField ? column.valueField : index] + '&lt;/span&gt;'
                  });
  
                  result = $('&lt;li&gt;&lt;/li&gt;').data('item.autocomplete', item).append('&lt;a class="mcacAnchor"&gt;' + t + '&lt;div style="clear: both;"&gt;&lt;/div&gt;&lt;/a&gt;').appendTo(ul);
                  return result;
              }
          });
  
          $("#search").mcautocomplete({
              showHeader: true,
              columns: columns,
              source: colValues,
              select: function (event, ui) {
                  this.value = (ui.item ? ui.item[0] : '');
                  return false;
              }
  
          });
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Working <a href="http://jsfiddle.net/alforno/d3t7V/" rel="nofollow">Fiddle</a> here</p>