Troubleshooting jQuery-UI Autocomplete with Remote Datasource

Question

I'm trying to get the jQuery UI AutoComplete widget working with a remote data source in a WebForms application. I have it successfully calling my web service, but the control does not pop up the list with the returned items.

Here's my markup:

<p>
    <label for="birds" class="fieldLabel">Company:</label>
    <input id="existingProgramCompanyName" type="text" style="width: 350px" />
</p>

And here's my script:

$("#existingProgramCompanyName").autocomplete({
    source: "/Services/ProgramListServices.asmx/FilteredProgramList",
    minLength: 3,
    select: function (event, ui) {
        alert('Got it!');
    }
});

Whenever I've done this in the past, my biggest problem has been returning the data in the right format. The AutoComplete widget wants JSON and so I've spent considerable time getting my code to return valid JSON. Here's the actual string being returned from my web service:

{
  "Companies":[{"Id":"1","Value":"First","Label":"First"},
               {"Id":"2","Value":"Second","Label":"Second"},
               {"Id":"3","Value":"Third","Label":"Third"}],
  "HasData":true,"Message":"","Success":true
}

Is that valid JSON?

The control correctly shows the little animated loading image. My web service is being called and is returning without error. But the AutoComplete control never pops up the list.

Does anyone see any problems with what I have so far? And what would be the next step in trying to troubleshoot this?

Yes it is a valid JSON Object (a parsed json).

Christian Ezeani
– Christian Ezeani

2013-10-03 18:07:09 +00:00
Commented Oct 3, 2013 at 18:07 — Christian Ezeani
– Christian Ezeani, Commented Oct 3, 2013 at 18:07

MikeSmithDev · Accepted Answer · 2013-10-03 19:10:06Z

1

Yes your string is valid JSON, but it doesn't mean that AutoComplete can consume it. Formats can be seen at Autocomplete Widget Source. I think specifically this applies to your case for source:

* An array of strings: [ "Choice1", "Choice2" ]
* An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

What your feed is generating will not work as expected, whether you surround it in brackets or not (you'll need the brackets):

$("#existingProgramCompanyName").autocomplete({
    source: {"Companies": [{ "Id": "1", "Value": "First", "Label": "First" },
        { "Id": "2", "Value": "Second", "Label": "Second" },
        { "Id": "3", "Value": "Third", "Label": "Third"}],
        "HasData": true, "Message": "", "Success": true
        }
    });

However, this slightly modified version will (note the cases are lowercase):

 $("#existingProgramCompanyName").autocomplete({
     source: [{ "value": "First", "label": "First" },
              { "value": "Second", "label": "Second" },
              { "value": "Third", "label": "Third"}]
     });

So, to fix, I would tweak your JSON feed to output a different format!

Update: perhaps just try the array of strings option for testing:

List<string> s = new List<string>();
//populate the list
return new JavaScriptSerializer().Serialize(s);

edited Oct 3, 2013 at 19:10

answered Oct 3, 2013 at 18:42

MikeSmithDev

15.8k4 gold badges61 silver badges91 bronze badges

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

10 Comments

Jonathan Wood Over a year ago

I think we are talking about different things here. If source is set to a string value, the string represents a URL, as demonstrated in my markup code. I am talking about the JSON returned from the web service that the AutoComplete code is calling.

MikeSmithDev Over a year ago

Yes I understand that... but if it can't parse it as a JSON object as shown above, why would it be able to parse that same JSON object fed from your URL.

Jonathan Wood Over a year ago

Well, that's what I'm trying to work through. I was thrown by your syntax. Perhaps you are just showing what the format needs to be?

MikeSmithDev Over a year ago

Yes, sorry! I was just showing that as an example, and meaning change your JSON out from Example 1 (what your feed currently generates) to what I show in Example 2 (a slightly modified version of your JSON feed).

Jonathan Wood Over a year ago

And, by the way, my web service creates an instance of a class that derives from JsonResponse, and then calls .Serialize() on that instance. So, unfortunately, I don't have much control over the additional data.

|

Collectives™ on Stack Overflow

Troubleshooting jQuery-UI Autocomplete with Remote Datasource

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related