jquery autocomplete datasource change

Question

I have setup a jquery autocomplete which changes datasource depending on the input on the textbox.

After datasource on the jquery changes, it doesn't fire until press up or down arrow button.

I have used firebug to check the datasource and I can't find anything wrong with it.

Can someone show me how to send up or down arrow key to a control or resolve this in any other way?

Thanks a lot!

edit: I have replaced this with JSON as following but it seems the request comes error alert box

jQuery(function () { jQuery("input#autocomplete").autocomplete({ contentType: 'application/json; charset=utf-8', dataType: 'json', mustMatch: false, limit: 10, minChars: 2,

            select: function (event, ui) {
                AutoCompleteSelectHandler(event, ui)
            }
            ,
            source: function (request, response) {
                jQuery.ajax({
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: {},
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        alert(data);
                    },
                    error: function (XMLHttpRequest, textStatus,

errorThrown) { alert(textStatus); } }); } });

    });

there is this html input box.

What have I done wrong here? I have confirmed that the web service is working correctly.

edit2 : I have made changes like the following:

jQuery(function () { jQuery("input#autocomplete").autocomplete({

            minChars: 2,

            select: function (event, ui) {
                AutoCompleteSelectHandler(event, ui)
            }
            ,
            source: function (request, response) {
                jQuery.ajax({
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: '{ Suburb: "' +

jQuery("#autocomplete").val() + '" }', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", dataFilter: function (data) { return data.d; }, success: function (data) { alert(data.d); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); } });

    });

so the alert is working fine. But jquery does not show matched list. How do I do this?

EDIT 2:

I have managed to work out the issue with webservice. How do I set the response so that autocomplete shows the list accordingly? At the moment each item on the list shows me the full list of items.

ie ) if I type in 'ab' and if there are 3 things that matches up then it will show me the same result 3 times on 3 different lines.

I have the jquery setup like the following:

jQuery(function () { jQuery("input#autocomplete").autocomplete({

            minChars: 2,

            select: function (event, ui) {
                AutoCompleteSelectHandler(event, ui)
            }
            ,
            source: function (request, response) {
                jQuery.ajax({
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: '{ Suburb: "' + jQuery("#autocomplete").val() + '" }',
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {

                                                    response($.map(data.d, function (item) {
                                                        return {
                                                            value: data.d
                                                        }
                                                                                }))


                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        });

Any help will be much appreciated, thanks a lot!

Answer 1

I have got it working but one thing I am not sure is that the item becomes just a string array rather than JSON object. I did try to parse each item as a JSON but doesn't seem to work.

Here is the working jquery json with webservice jquery combinations.

jQuery(function () { jQuery("input#autocomplete").autocomplete({

            minChars: 2,

            select: function (event, ui) {
                AutoCompleteSelectHandler(event, ui)
            }
            ,
            source: function (request, response) {
                jQuery.ajax({
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: '{ Suburb: "' + jQuery("#autocomplete").val() + '" }',
                    dataType: "json",
                    type: "POST",
                    minChars: 2,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        var obj = jQuery.parseJSON(data.d);
                        response($.map(obj, function (item) {
                            var item_obj = jQuery.parseJSON(item);
                            return {
                                value: item[1]


                            }
                        }))


                    },
                    //                        parse: function (data) {
                    //                            var parsed = [];
                    //                            data = data.d;

                    //                            for (var i = 0; i < data.length; i++) {
                    //                                parsed[parsed.length] = {
                    //                                    data: data[i],
                    //                                    value: data[i].value,
                    //                                    result: data[i].value
                    //                                };
                    //                            }

                    //                            return parsed;
                    //                        },
                    //                        formatItem: function (item) {
                    //                            return item.value;
                    //                        },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        });



    });