jQuery UI 自动完成不显示通过 AJAX 获取的结果

Question

我正在尝试在我的 Web 应用程序中使用 jQuery UI 自动完成功能。我设置的是一个名为 SearchPreload.aspx 的页面。此页面检查是否有一个值（术语）与另一个参数一起出现。该页面验证传入的值，然后从数据库中提取一些数据并在页面上打印出 javascript 数组（例如：["item1","item2"]）。代码：

protected void Page_Load(object sender, EventArgs e)
{
    string curVal;
    string type ="";
    if (Request.QueryString["term"] != null)
    {
        curVal = Request.QueryString["term"].ToString();
        curVal = curVal.ToLower();
        if (Request.QueryString["Type"] != null)
            type = Request.QueryString["Type"].ToString();
        SwitchType(type,curVal);
    }
}
public string PreLoadStrings(List<string> PreLoadValues, string curVal)
{
    StringBuilder sb = new StringBuilder();
    if (PreLoadValues.Any())
    {
        sb.Append("[\"");
        foreach (string str in PreLoadValues)
        {
            if (!string.IsNullOrEmpty(str))
            {
                if (str.ToLower().Contains(curVal))
                    sb.Append(str).Append("\",\"");
            }
        }
        sb.Append("\"];");
        Response.Write(sb.ToString());
        return sb.ToString();
    }
}

数据库部分工作正常，如果我通过浏览器导航到页面屏幕上，则会打印出正确的数据。

jQuery ui 自动完成编写如下：

$(".searchBox").autocomplete({
    source: "SearchPreload.aspx?Type=rbChoice",
    minLength: 1
});

现在，如果我的理解是正确的，每次我在搜索框中键入内容时，它都应该充当按键并触发我的源来限制数据，正确吗？当我通过 SearchPreload.aspx 代码后面的调试语句时，似乎该页面根本没有被命中。

如果我将自动完成函数包装在 .keypress 函数中，那么我会进入搜索预加载页面，但仍然没有得到任何结果。我只想在搜索框下显示结果，就像 jQuery 网站上的默认功能示例。我做错了什么？

Answer 1

如果服务器返回的 JSON 无效，自动完成功能将不会显示建议。因此，复制以下 URL（或返回的 JSON 数据）并将其粘贴到 JSONLint 上。查看您的 JSON 是否有效。

http://yourwebsite.com/path/to/Searchpreload.aspx?Type=rbChoice&term=Something

PS：我没有看到您正在调用 PreLoadStrings 函数。我希望这是正常的。

Answer 2

有几件事需要检查。

• 确保页面路径正确。如果您位于 http://mysite.com/subfolder/PageWithAutoComplete.aspx，并且您的搜索预加载.aspx 页面位于另一个目录中，例如 http://mysite.com/anotherFolder/searchpreload.aspx 您用作源的 url 不正确，需要为

  来源：“/anotherFolder/Searchpreload.aspx?Type=rbChoice”

• 您可以尝试的另一件事是使您的方法正在调用 searchpreload.aspx 页面上的页面方法。通常，在使用 javascript 时，我尝试使用页面方法来处理 ajax 请求并发回其数据。有关页面方法的更多信息，请访问：http://www.singingeels.com/Articles/Using_Page_Methods_in_ASPNET_AJAX。 aspx

HTH.