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....

I have been testing this with chrome and the above shows a filtered drop down menu correctly; however, with IE, it seems to error out. I am now baffled as to the solution??? — wirble
– wirble, Commented Oct 22, 2011 at 0:43
This fix my issue if you put it on top before the ajax call: jQuery.support.cors = true; Thanks to this post: stackoverflow.com/questions/5241088/… — wirble
– wirble, Commented Oct 22, 2011 at 1:31
I really think just doing response(data.split(",")); should work. It assumes your data is in the format "one,two,three,four,five". What exactly is the error you're seeing? — Andrew Whitaker
– Andrew Whitaker, Commented Oct 24, 2011 at 1:47
TypeError: Object #<Object> has no method 'split' [server/_layouts/sites/javascripts/AutoComplete.js:24]/n I looked it into further: data is an object, if I use response(data.d.split(",")); //it works — wirble
– wirble, Commented Oct 24, 2011 at 15:12

Andrew Whitaker · Accepted Answer · 2011-10-21 19:25:14Z

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');
    }
});

answered Oct 21, 2011 at 19:25

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wirble Over a year ago

Need to use, response(data.d.split(",")); //= frustrating :-)

Andrew Whitaker Over a year ago

@wirble: Ahh, okay. Glad you figured it out :)

Collectives™ on Stack Overflow

jquery autocomplete display the output string

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related