Making jQuery UI's Autocomplete widget *actually* autocomplete -

i need auto-complete in app i'm working on and, since i'm using jquery ui, i'm trying make autocomplete widget meet needs.

step 1 make search term match @ beginning of suggested terms. i've got working, can see in code below. step 2 have first suggestion actually autocomplete.

which requires bit of explanation. when hear "autocomplete", envision typing "f" , having contents of text field change "foo", "oo" selected, replaced if type character , left in field if tab out of it. i'd call autocomplete widget suggesting, rather autocompleting.

looking @ how autocomplete works internally, think autocompleteopen event correct place (it's called every time list of suggestions updated), i'm @ loss how access suggestion list there.

any thoughts?

$("#field").autocomplete({     delay: 0,      source: function filter_realms(request, response) {         var term = request.term.tolowercase();         var length = term.length;          response($.grep(candidates, function(candidate) {             return candidate.substring(0, length).tolowercase() === term;         }));     },      open: function(event, ui) {         // magic happens here?     } }); 

got it. i'd forgotten widgets can accessed via .data().

$("#field").autocomplete({     delay: 0,      source: function filter_realms(request, response) {         var term = request.term.tolowercase();         var length = term.length;          response($.grep(candidates, function(candidate) {             return candidate.substring(0, length).tolowercase() === term;         }));     },      open: function(event, ui) {         var current = this.value;         var suggested = $(this).data("autocomplete").menu.element.find("li:first-child a").text();          this.value = suggested;         this.setselectionrange(current.length, suggested.length);     } });