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:

[{"id":"aaa","id_and_ba_name":"bbb"}, ...]

   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);
    }

JQuery 1.8.16
Rails 3.1