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
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.