title: Multi Column AutoComplete using JQUERY
body: <ol>
  <li>List item</li>
  </ol>
  
  <p>I am looking at the JQUERY example on the <a href="http://jsfiddle.net/g4stL/212/" rel="nofollow">http://jsfiddle.net/g4stL/212/</a> link in Jsfiddle website. </p>
  
  <p>I am very impressed by the feature. Infact we have to implement the exact same feature on our application.</p>
  
  <p>If I copy the code as it is, I am able to see the multicolumn autocomplete. However the selection part does not work. If I select using mouse cursor or using Arrow keys the program fails. </p>
  
  <p>The error I get is </p>
  
  <p>"htmlfile: Unexpected call to method or property access."</p>
  
  <p>In the append function of jQuery.fn.extend code in Jquery-1.7.2.js.</p>
  
  <p>mcautocomplete widget is in the custom js file under script folder in MVC.</p>
  
  <p>Can you please help?</p>
  
  <pre><code>$.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;
      }
  });
  </code></pre>
  
  <p>Additional findings:
  The code works in Fiddle
  This code does not crash in Chorme or FireFox.</p>