Home > DeveloperSection > Forums > ASP.NET Jquery Autocomplete
Jayden Bell
Jayden Bell

Total Post:105

Points:739
Posted on    August-25-2014 2:02 AM

 ASP.Net ASP.Net 
Ratings:


 1 Reply(s)
 744  View(s)
Rate this:

I have an ASP.NET webforms application and trying to implement jQuery autocomplate on a text box. The server code is getting called, but nothing is displayed. I've replaced the call to the web service and added some static text and that gets displayed OK. Can anyone see what the issue is?

The server side code is here:

[WebMethod]

    public string[] ReturnPostcodes(string term)

    {

        PostcodeService postcodes = new PostcodeService();

        var results = postcodes.ReturnPostcodes().Where(p => p.Postcode.StartsWith(term.ToUpper())).Select(p => p.Postcode).Take(20).ToArray();

        return results;

    }

The HTML is here:

<tr>

        <td>Mobile Telephone:</td>

        <td><asp:TextBox runat="server" ID="txtPostcode"></asp:TextBox></td>

    </tr>

The jquery is here:

$(document).ready(function () {

        $('#ctl00_ctl00_mainContent_mainContent_txtPostcode').each(function () {

            $(this).autocomplete({

                 source: '/Postcodes.asmx/ReturnPostcodes'

            });

        });

    });



Sumit Kesarwani

Total Post:378

Points:2694
Posted on    August-25-2014 2:27 AM

Hi jayden, 
try this:

<script type="text/javascript">

        $(function () {

            var lastXhr, cache = {};

            $('#<%= Search.ClientID %>').autocomplete({

                source: function (request, response) {

                    var term = request.term;

                    if (term in cache) {

                        response(cache[term]);

                        return;

                    }

                    lastXhr = $.ajax({

                        type: "POST",

                        url: "Default.aspx/GetBooks",

                        data: "{ \"term\": \"" + request.term + "\" }",

                        contentType: "application/json; charset=utf-8",

                        dataType: "json",

                        success: function (data, status, xhr) {

                            cache[term] = data.d;

                            if (xhr === lastXhr) {

                                response(data.d);

                            }

                        }

                    });

                }

            });

        });

    </script>


Don't want to miss updates? Please click the below button!

Follow MindStick