CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Bruce
Bruce

Reputation: 89

I cannot get jQuery-UI's autocomplete to display returned items

I cannot get the returning data from the server to display on my form using jQuery-UI's autocomplete widget. (A narrow "return box" forms beneath the input element, but is not populated)

I'm running the latest versions of jQuery and jQuery-UI, and my returning data is validated JSON (http://jsonlint.com/). The validator plugin (which can cause similar problems) is not part of my page.

Any help will be gratefully received.

Thanks/Bruce

My js is:

var ac_config = {
    source: "scripts/ajax_studentroll.asp?id=do_name",
    select: function(event, ui){
        $("#s_name2").val(ui.item.sname);
    },
    minLength:2
};
$("#s_name2").autocomplete(ac_config);

My html is:

<form action="scripts/ajax_studentroll.asp?id=getinfo" id="getStudentInfo" method="post">
    <p>
        <label class="label20" for="s_name">Enter the user's first name or surname,</label>
        <input id="s_name2" name="s_name2" value="" type="text" />&nbsp;
        <button class="fg-button_s ui-state-default ui-corner-all" type="submit">Get!</button>
    </p>
</form>

The returning JSON is of the form:

[{"sname":"David Jones"},{"sname":"David McKay"},{"sname":"David Perry"}]

Upvotes: 0

Views: 250

Answers (2)

JAAulde
JAAulde

Reputation: 19560

The autocomplete widget expects an array of values.

If you are going to have a custom data format (which you do) you need to override the _renderItem on the autocomplete instance as shown at http://jqueryui.com/demos/autocomplete/#custom-data (click the "View Source" link on that page and notice how they get the instance form the input's .data(), and override _renderItem)

Upvotes: 1

mu is too short
mu is too short

Reputation: 434635

From the fine manual:

Expected data format

The data from local data, a url or a callback can come in two variants:

  • An Array of Strings:
    [ "Choice1", "Choice2" ]
  • An Array of Objects with label and value properties:
    [ { label: "Choice1", value: "value1" }, ... ]

So your JSON isn't coming back in the format that the widget expects, you probably just want to adjust the server to return a simple array of matching strings:

["David Jones","David McKay","David Perry"]

Upvotes: 1

Related Questions