ASP.NET Jquery 自动完成答案

【问题标题】：ASP.NET Jquery AutocompleteASP.NET Jquery 自动完成
【发布时间】：2025-11-24 04:05:01
【问题描述】：

我有一个 ASP.NET webforms 应用程序并尝试在文本框上实现 jQuery 自动编译。正在调用服务器代码，但没有显示任何内容。我已经替换了对 Web 服务的调用并添加了一些静态文本，并且显示正常。谁能看看是什么问题？

服务器端代码在这里：

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

    }

HTML 在这里：

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

jquery 在这里：

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

            $(this).autocomplete({
                 source: '/Postcodes.asmx/ReturnPostcodes'
            });
        });
    });

【问题讨论】：

此链接应该对您有所帮助。 dotnetcurry.com/ShowArticle.aspx?ID=515

标签： jquery asp.net webforms

【解决方案1】：

没有显示任何内容的原因是因为您没有为自动完成提供正确的数据格式，也没有指定如何加载数据。您可以从 web 服务返回 JSON 或 XML 格式或使用 jquery 自己解析响应。查看jquery ui autocomplete site 获取Remote JSONP 和XML 数据解析一次 示例。

【讨论】：

【解决方案2】：

确保Result 不为空

尝试使用 StartsWith 并传入一个 StringComparison

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

【讨论】：

【解决方案3】：

asp.net WebMethods 返回一个 json 对象，其中包含一个 'd' 变量中的响应（当您使用 jQuery XHR 调用它时，有一些选项需要设置），脚本 sn-p:

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

【讨论】：