Ajax Autocomplete trouble

106 Views Asked by At

I'm having trouble with the autocomplete on the page. The setup is complicated: FrameworkMasterPage ApplicationMasterPage MyContentPage

Initially, FrameworkMasterPage holds everything in asp:UpdatePanel, but I've tried removing it just to check, it doesn't work even without updatepanel.

I call PageMethod, with the following signature:

<System.Web.Services.WebMethod()> _
    Public Shared Function GetPrimatelj(prefixText As String, count As Integer) As    String()
     Dim tl As New List(Of String)
     tl.Add("one")
     tl.Add("two")
     tl.Add("onu") ' so I can check that "on" return two selections

     Return tl.ToArray
End Function

The method is executed successfully, but the result is full page rendering instead of method result. I get autocomplete dropdown, but it contains one under the other D o c t y p e etc...whole page rendering letter by letter.

I've tried calling directly PageMethod proxy...same result. I've tried both AjaxToolkit AutoCompleteExtender (thus, the signature above) and jQuery Ajax call

Same result. Yes, I did autocomplete before, more then once :).

This is (base, there is more code due to cache handling, but this is the critical part) my ajax call

$.ajax({
                            url: "AjaxController.aspx/GetPrimatelj",
                            data: "{ 'term': '" + request.term + "' }",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            dataFilter: function (data) { return data; },
                            success: function (data) {
                                oldterm = request.term;
                                cache[request.term] = data.d;
                                response($.map(data.d, function (item) {
                                    return {
                                        value: item
                                    }
                                }))
                            },
                            error: function (result, status, error) {
                                console.log(status + " - " + error);
                            }
                        });

EDIT: as per request full function code. To repeat, the code works in as far it calls the method in question. It is just that the method doesn't return JSON (or string for that matter), but the whole page

 function SearchText() {
            console.log("search");
            var cache = {};
            var oldterm;
            console.log("#<%=txtSearch.ClientID%>");

            $("#<%=txtSearch.ClientID%>").autocomplete({
                source: function (request, response) {
                    console.log("ac");
                    if (request.term.indexOf(oldterm) >= 0) {
                        if (typeof (oldterm) != 'undefined') {
                            var data = jQuery.grep(cache[oldterm],
                        function (ele) {
                            return (ele.indexOf(request.term) >= 0);
                        });
                            response($.map(data, function (item) {
                                return { value: item }
                            }))
                            return;
                        }
                    } else {
                        cache = {};
                        console.log("else")

                        $.ajax({
                            url: "AjaxController.aspx/GetPrimatelj",
                            data: "{ 'term': '" + request.term + "' }",
                            dataType: "jsonp",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            dataFilter: function (data) { return data; },
                            success: function (data) {
                                oldterm = request.term;
                                cache[request.term] = data.d;
                                response($.map(data.d, function (item) {
                                    return {
                                        value: item
                                    }
                                }))
                            },
                            error: function (result, status, error) {
                                console.log(status + " - " + error);
                            }
                        });
                    }
                },
                minLength: 3,
                select: function (event, ui) {
                    if (ui.item) {
                        console.log(ui.item.label);
                        console.log(ui.item.value);
                    }
                }
            });
        }

Help? Thank you in advance :)

0

There are 0 best solutions below