来自 XML 的 JQuery 自动完成（动态结果）答案

【问题标题】：JQuery AutoComplete From XML (Dynamic Results)来自 XML 的 JQuery 自动完成（动态结果）
【发布时间】：2013-10-19 02:23:03
【问题描述】：

也许我不理解这个概念（我是 AJAX/javascript/Web 新手）。我正在使用 JQuery 自动完成功能，如果我指定一个小的、有限项的平面文件 (suggestions.xml)，该功能可以正常工作，但是当我使用建议的实际生产数据文件 (3 MB) 时，脚本不起作用一点也不。

所以我创建了一个 Web 服务，它根据文本框中的字符生成 XML，但似乎这个 JQuery 不会在每次按键时运行，而仅在页面首次加载时运行。显然，要使这个函数发挥作用，它需要在用户输入输入字段时动态地获取结果。

$(document).ready(function () {
var myArr = [];

$.ajax({
    type: "GET",
    // this line always sends the default text; not what the user is typing
    url: "Suggestions.aspx?searchString=" + $("input#txtSearch").val(),
    dataType: "xml",
    success: parseXml,
    complete: setupAC,
    failure: function (data) {
        alert("XML File could not be found");
    }
});

function parseXml(xml) {
    //find every query value
    $(xml).find("result").each(function () {
        myArr.push({ url: $(this).attr("url"), label: $(this).attr("name") + ' (' + $(this).attr("type").toLowerCase() + ')' });
    });
}

function setupAC() {
    $("input#txtSearch").autocomplete({
        source: myArr,
        minLength: 3,
        select: function (event, ui) {
            $("input#txtSearch").val(ui.item.label);
            window.location.href = ui.item.url;
            //alert(ui.item.url + " - " + ui.item.label);
        }
    });
}

});

在服务器上，我希望看到一些与用户在搜索框中输入的字符相对应的请求，但我收到了一条消息：

2013-10-18 22:02:04,588 [11] DEBUG baileysoft.mp3cms.Site - QueryString params: [searchString]:'Search'

我的建议平面文件对于 JQuery 来说似乎太大了，而且我的 Web 服务脚本永远不会被调用，除非在第一次加载页面时。

如果我无法在用户输入时返回数据库（通过我的网络服务）获取建议，我该如何在用户在搜索框中输入时动态生成建议？

【问题讨论】：

标签： javascript jquery xml ajax autocomplete

【解决方案1】：

好的，我已经解决了。

在 ASPNET 方面；我创建了一个表单来接收和响应 AJAX：

    Response.ContentType = "application/json";
    var term = Request.Form["term"];

    var suggestions = GetSuggestions(term); // Database results
    if (suggestions.Count < 1)
        return;

    var serializer = new JavaScriptSerializer();
    Response.Write(serializer.Serialize(suggestions);

在AJAX端我修改了js函数：

    $("input#txtSearch").autocomplete({
       minLength: 3,
       source: function (request, response) {
         $.ajax({
           url: "Suggestions.aspx",
           data: { term: $("input#txtSearch").val() },
           dataType: "json",
           type: "POST",
           success: function (data) {
            response($.map(data, function (obj) {
                return {
                    label: obj.Name,
                    value: obj.Url
                };
            }));
           }
          });
       },
       select: function (event, ui) {
         $("input#txtSearch").val(ui.item.label);
         window.location.href = ui.item.value;
       }
    });

现在一切都按预期工作。

希望这可以帮助其他可能在试图为 ASPNET 找出 JQuery 内容时遇到困难的人。

【讨论】：