Replacing autocomplete suggestions on the fly.

[Sean]

I thought I'd offer a potential solution to a problem that took me awhile to solve.  Perhaps the Kendo team will consider exposing a method that will make this easier in the future.

I have a search form with a text field and two radio buttons.  The radio buttons are labelled "User ID" and Username."  The user searches for other users in the system by selecting the appropriate criteria by which to search (userid or username) and typing their text in the field.  What I wanted was to provide autocomplete suggestions that pertained to the search criteria.  So if the user has selected Username, the suggestions will be a list of usernames.

Here's how I did it.

JSON pseudo-code of datasource
suggestions: {
   userIds: [],
   userNames: []
}

$(document).ready(function ()
{
    $(":radio").bind('click', setAutoComplete);
    initSuggestions();
}

var initSuggestions = function()
{
    suggestionDS.one('change', function()
    {
          // suggestions is a global variable allowing us to hit
        // this datasource only once.
        suggestions = suggestionDS.data();
        $("#textField").kendoAutoComplete( suggestions.userIds );        
    });
    suggestionDS.read();
}

var setAutoComplete = function()
{    
    // Grab a reference to the autoComplete
    var ac = $("#textField").data("kendoAutoComplete");
    
    // Remove all of its suggestions
    ac.options.dataSource.splice(0, ac.options.dataSource.length);
    
    // Get the correct array based on the user's radio button selection
    var arr = $(":radio:checked").val() == "userIds" ? suggestions.userIds : suggestions.userNames;
    
    // Push all of the elements onto the autocomplete's datasource.
    for( x in arr )
    {
        ac.options.dataSource.push(arr[x]);
    }
}