Lazy initialization of jquery UI autocomplete

Question

I'd like to lazy initialize the source options of a jQueryUI autocomplete. I'm aware of the possibility to pass a function to the source option, but I want to delay the initialization until the user really starts using the autocomplete.

I tried waiting for the search event and then set the source option, but this has no effect.

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Scheme"
    ];
$("#searchFirstTransactionStateInfo_searchPartnerId").autocomplete({
    source : [],
    minLength: 0,
    search: function( event, ui ) {
        $(event.target).source = availableTags;
    }
});

How can I delay setting the source option until the user starts using the UI element?

Note: I used a fixed array for simplicity. Finally I want to call an AJAX function.

Does this work as well if the user uses keyboard navigation? — BetaRide
– BetaRide, Commented Jul 8, 2014 at 8:05

giorgio · Accepted Answer · 2014-07-08 08:10:55Z

Well, if you use a function as the source parameter, and let that function perform a get request (ajax ofcourse), it will actually only start making requests when you've typed something. As an example, open up your network tab and start typing in this UI example:

http://jqueryui.com/autocomplete/#multiple-remote

$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#birds" )
    .autocomplete({
        source: function( request, response ) {
            $.getJSON( "search.php", {
                term: extractLast( request.term )
            }, response );
        },
        search: function() {
            // custom minLength
            var term = extractLast( this.value );
            if ( term.length < 2 ) {
                return false;
            }
        },
        focus: function() {
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
        }
    });
});

Collectives™ on Stack Overflow

Lazy initialization of jquery UI autocomplete

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related