JQuery Autocomplete updating a document element (not the dropdown)

I came across the requirement of updating a page element from the result of an Autocomplete. The server results were to be placed in a select element as set of option items. I had to overwrite some JQuery UI Autocomplete private methods as apparently there was no easy way of generating HTML and embedding it in the right spot on the page: The JSON server response: {% highlight ruby %} [{“id”:”aaa”,”id_and_ba_name”:”bbb”}, …] {% endhighlight %}

{% highlight ruby %} var auto = $(“#lc”).autocomplete({ minLength: 3, delay: 600, dataType: ‘json’, source: ‘/remote/action’, open: function() { $(“ul.ui-autocomplete”).remove(); //removes the ul styling for dropdown } }) auto.data(“autocomplete”)._renderMenu= function(element, items) { //treats the DOM element as the menu where items are to be placed var self = this; $(‘#the_select_element’).show().html(‘’); $.each( items, function( index, item ) { self._renderItem($(‘#the_select_element’), item ); }); } auto.data(“autocomplete”)._renderItem= function(element, item) { // generate options elements and adds them to menu return $(“<option></option>”) .data(“item.autocomplete”,item) .attr(“value”,item.id) .append(item.id_and_ba_name) .appendTo(element); } {% endhighlight %} JQuery 1.8.16 Rails 3.1