jquery autocomplete datasource change

0
votes

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!

1
javascriptjqueryjquery-ui-autocomplete
Your description makes little to no sense (to me). For example, After datasource on the jquery changes, it doesn't fire until press up or down arrow button. What is datasource on jquery? What causes it to change? What is it that isn't firing? Without sharing code, helping you is about as impossible as helping someone who says "I'm using autocomplete but it's not working, please help". – davin
i use request on xmlhttpobject to get the list from a page, so the datasource is just a string array. if I change the datasource, the autocomplete list does not show.However, when I press up arrow key or down arrow, then the list shows up. Maybe I should try to use json with custom datasource. – rlee923
Still not clear and certainly not reproducable. If you setup a jsfiddle.net it will make everyone's life much easier and up the chances of solving your problem – davin
whoa I did not know there is tool like this. let me set this up and let know you. – rlee923
You probably cannot see the result because I haven't set up a public datasource page. So basically I have written the code to detect key press on the textbox, and wait for 1 sec, if there is no change in the text then javascript will use the keyword to search from a page. And I reset the datasource with the result of the search. – rlee923

1 Answers

0
votes

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);
                    }
                });
            }
        });



    });