Question

我有一个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'
            });
        });
    });

Answer 1

没有显示任何内容的原因是因为您没有为自动填充提供正确的数据格式，您也没有指定如何加载数据。您可以从webservice返回JSON或XML格式，也可以使用jquery自行解析响应。结帐jquery ui autocomplete site以获取远程JSONP 和 XML数据解析一次示例。

Answer 2

确保Result不为空

尝试使用StartsWith并传入StringComparison

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

Answer 3

asp.net WebMethods在'd'变量中返回一个包含响应的json对象（当你使用jQuery XHR调用它时，有一些选项可以设置），脚本片段：

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

ASP.NET Jquery自动完成

3 个答案: