JQuery Autocomplete only suggesting first row

Question

I'm doing research using JQuery's Autocomplete plugin and Google Maps' API. What I have so far is located here. I'm using Asp.net MVC to generate the list of potential address matches (limited to US addresses only) and presenting them as a pipe-delimeted list to Autocomplete, which is supposed to be .spliting them up and suggesting them to the user.

Here's the javascript:

$(document).ready(function() {
        $("#address").autocomplete("/Address/Address/").split('|');
    });

Here's what Address/Address?q=3118 is returning:

Galax Dr, Statesville, NC 28677, US|State Highway S-46-148, Gastonia, NC 28052, US|

The problem I'm having (besides a stubborn IE-only javascript error, which I'll break into another question), is that only the first result is suggested.

This page clearly shows two results, yet typing "3118" into the textbox produces only the Galax Dr result. How can I get Automplete to produce both results?

EDIT: cleaned up the code to get rid of that "test code" vibe

EDIT: fixed myself by replacing pipes with CRLF and removing split(). New javascript:

$(document).ready(function() {
    $("#address").autocomplete("/Address/Address/");
});

Autocomplete is my new best friend :)

Answer 1

Looking at the JavaScript at the bottom of the page, it looks like you are splitting the string after you call autocomplete.

So, instead of

$("#example").autocomplete(data).split('|');

you need to do

$("#example").autocomplete(data.split('|'));

That is from looking at your current page though... which looks like some test code. It would be helpful if you posted the full code you are trying to work with.

Answer 2

If you are going to pass back a pipe delimited list, then you need to have a handler function to process the result. Something like:

 $("#address").autocomplete({source: function(request, response) {
                                   $.ajax({
                                            url: "/Address/Address/",
                                            data: request,
                                            success: function(data) {
                                              response(data.split('|'));
                                            }
                                          });
                                 }
  });

Check the docs on the three ways to interact with a data source. You either need to return json instead of pipe delimited data or use a callback.