jQuery UI: Using Autocomplete with Tabs

I was working on a project that happened to have the need to embed a jQuery UI Autocomplete textbox within a Tab container. Normally fine and easy thing to do, however I also needed to override the Autocomplete’s private function  _renderItem property so I could template my own html to display. The problem was that when the Autocomplete would kick in it would drop the contents of it’s drop down to every <ul> with jQuery UI classes it could find and being inside the Tab control that was a few, this was not the effect I desired.

After much searching, or my lame attempts at searching, I could not find a readily available answer so decided to look more into the appendTo functions of the Autocomplete control. To solve this problem I created a <div> container to append the contents of the Autocomplete to and then told the _renderItem to also render into this control as otherwise it would resolve to the default ignoring the .appendTo option.

 1: $searchBox.autocomplete({

 

 2:     source: searchCache,

 

 3:     appendTo: 'div#ac' // Insert container here to insert contents

 

 4: }).data('autocomplete')._renderItem = function (ul, item) {

 

 5:     return $('<li></li>').data('item.autocomplete', item)

 

 6:     .append('<a><span class="searchlabel">' + item.label + '</span></a>')

 

 7:     .appendTo('div#ac ul'); // This is where to insert the custom html 

 

 8:                             // so as not to ignore the .appendTo above

 

 9: };