comma separated auto complete with jquery auto complete

Question

I am trying to implement auto complete via jquery auto complete plugin.A simple auto complete works for me. I am not able to achieve comma separated auto complete .

Please help me with where I am going wrong.

My jquery code:

$(document).ready(function() {  
$.getJSON('/releases/new.json', function() {      
alert("inside getJson"); 
alert(data1); 
$('#release_tester_tokens').autocomplete({source:names,multiple: true});  
});
});

Thanks, Ramya.

Answer 1

See if this walk-through helps. It includes the following code which allows the user to enter multiple search terms separated by commas:

$("#<%= txtMultipleName.ClientID %>").autocomplete({
    source: function (request, response) {
        $.getJSON("AutoComplete.ashx", {
            term: extractLast(request.term)
        }, response);
    },
    search: function () {
        // custom minLength
        var term = extractLast(this.value);
        if (term.length < 1) {
            return false;
        }
    },
    focus: function () {
        // prevent value inserted on focus
        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;
    }
});
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

There is also plenty of information on the jQuery UI autocomplete page.

Answer 2

In your example you are accessing variables that are not even defined and never any of the results from your getJSON call. In JSON a comma separated list is actually an array (if it is in [] brackets). If it is a string just use a String split to create the source array.

$(document).ready(function() {  
    $.getJSON('/releases/new.json', function(data) {
        $('#release_tester_tokens').autocomplete({
            source: data.list,
            multiple: true
        });  
    });
});