ASP.NET Jquery Autocomplete

Question

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

This link should help you. dotnetcurry.com/ShowArticle.aspx?ID=515 — PraveenLearnsEveryday
– PraveenLearnsEveryday, Commented Dec 13, 2011 at 13:56

thiagoleite · Accepted Answer · 2013-09-23 21:41:23Z

3

The reason nothing is showing up is because you are not giving autocomplete the correct data format, also you are not specifying it how to load the data. You can return JSON or XML format from webservice or parse the response yourself using jquery. Checkout jquery ui autocomplete site for Remote JSONP and XML data parsed once examples.

edited Sep 23, 2013 at 21:41

answered Dec 13, 2011 at 13:59

thiagoleite

5031 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Massimiliano Peluso · Accepted Answer · 2011-12-13 13:59:38Z

0

Make sure that Result is not empty

Try using StartsWith and pass in a StringComparison

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

answered Dec 13, 2011 at 13:59

Massimiliano Peluso

26.8k6 gold badges65 silver badges75 bronze badges

Comments

Guillaume86 · Accepted Answer · 2011-12-13 14:05:40Z

asp.net WebMethods returns a json object containing the response in a 'd' variable (and there's some options to set when you call it with jQuery XHR), script snippet:

 <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>

Collectives™ on Stack Overflow

ASP.NET Jquery Autocomplete

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related