Making jQuery UI's Autocomplete widget *actually* autocomplete

Question

I need an auto-complete in the app I\'m working on and, since I\'m already using jQuery UI, I\'m trying to make its Autocomplete widget meet my needs.

Step one is to

Answer 1

Took the length checking portion and modified the filter function within the search. This way you can take advantage of the UI's JSON handling.

    filter: function(array, term) {
    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );

    var smatcher = term.toLowerCase();
    var length = smatcher.length;


    return $.grep( array, function(value) {
                if(value.label.substring(0, length).toLowerCase() == smatcher){
                    return matcher.test( value.label || value.value || value );
                }
    });

Answer 2

Got it. I'd forgotten that widgets can be 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);
    }
});