Question

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"}]

Answer 1

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)