jquery autocomplete display the output string

Question

I want to have the script display each item on a list of value from a string of comma delimited set.

ex. "one,two,three,four"

On the autocomplete drop down, it should show:

one two three four

However, the current code, show a list of only single char. There should be an easy way to split that list up and display the word instead of char. My javascript is a little limited, if someone can figure it out for me, I would appreciated. thanks. I have been search around and know that you should be able to override the parse function but it has to be easier than that. Also, I am using a webservice to return the string and can be delimited by anything but it needs to show the word.

If anyone knows the answer, I would appreciated...thanks

       $("#CustomerID").autocomplete({
            source: function(request, response) {
               $.ajax({
                type: "POST",
                url: "/customer/search.asmx/findvalue",
                dataType: "json",
                data: {
                    term: request.term
                },
                error: function(xhr, textStatus, errorThrown) {
                    alert('Error: ' + xhr.responseText);
                    },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item,
                            value: item
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            alert('Select');
        }
    });

EDIT----------------------

Thank you to the previous poster for help answering.

It seems to be the nuances of the formatting or something.

This works:

success: function (data) {
    response($.map(data, function (item) {
        return item.split(",");
    }));   
},

Using this seems to just error out or does nothing:

        success: function(data) {
            response(data.split(","));
        }

I even tried this, it goes through but does not result in a drop down menu:

success: function (data) {
    response($.map(data, function (item) {
        response(item.split(","));
    }));   
},

The above seem to work and displays what I want, not sure if it's efficient. If someone wants to explain why? Not sure why in some case you would need a response() and/or a return inorder for the autocomplete to work....

Answer 1

Try using .split() to split your string into an array of strings (an array is required as the source to the autocomplete widget).

$("#CustomerID").autocomplete({
    source: function(request, response) {
       $.ajax({
            type: "POST",
            url: "/customer/search.asmx/findvalue",
            dataType: "json",
            data: {
                term: request.term
            },
            error: function(xhr, textStatus, errorThrown) {
                alert('Error: ' + xhr.responseText);
                },
            success: function(data) {
                response(data.split(","));
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        alert('Select');
    }
});