jquery 自动完成源作为接受查询字符串的 url

Question

我正在尝试在文本框中使用 jQuery Autocomplete UI 小部件，但我没有运气让源代码正常工作。我有一个充满名称的数据库，我希望自动完成功能能够对其进行处理，因此我创建了一个名为 searchpreload.aspx 的页面，它在 url 中查找变量并根据查询字符串 vraiable 查询数据库。

当我在搜索框中键入内容时，我使用 keyup 函数，这样我就可以捕获需要发送的值。然后我从数据库收集字符串：

 if (Request.QueryString["val"] != null)
        {
            curVal = Request.QueryString["val"].ToString();
            curVal = curVal.ToLower();
            if (Request.QueryString["Type"] != null)
                type = Request.QueryString["Type"].ToString();

            SwitchType(type,curVal);
        }

它正确查询数据库，然后获取字符串并将它们放入列表中并将它们打印到页面：

private void PreLoadStrings(List<string> PreLoadValues, string curVal)
    {
        StringBuilder sb = new StringBuilder();
        if (PreLoadValues.Any())
        {
            foreach (string str in PreLoadValues)
            {
                if (!string.IsNullOrEmpty(str))
                {
                    if (str.ToLower().Contains(curVal))
                        sb.Append(str).Append("\n");
                }
            }
            Response.Write(sb.ToString());
        }
    }

这工作正常，如果我导航到此页面，我会得到一个列表我需要的所有数据，但是我无法让它显示在自动完成框中。当我调试代码时，自动完成的来源每次都正确调用此页面并获取正确的数据，它只是不显示任何内容。我做错了什么吗？

JQuery 代码：

<script type="text/javascript">
          $(document).ready(function () {
              $(".searchBox").focus();
              var checked = 'rbCNumber';
              $("input:radio").change(function (eventObject) {
                  checked = $(this).val();
              });
              $(".searchBox").keyup(function () {
                  var searchValue = $(".searchBox").val();
                  //alert("Searchpreload.aspx?val=" + searchValue + "&Type=" + checked);
                  $(".searchBox").autocomplete({
                      source:"Searchpreload.aspx?val=" + searchValue + "&Type=" + checked,
                      minLength: 2


                  });
              });

          });      
  </script>

另外，我应该以不同的方式执行此操作以使其更快吗？

Answer 1

您不会将结果显示到任何内容中 - 源将返回一个数据项，然后您可以使用该数据项填充页面上的其他内容。查看自动完成的选择和焦点方法。

这是我如何做到这一点的一个示例：

field.autocomplete({
                minLength: 1,
                source: "whatever",
                focus: function (event, ui) {
                    field.val(ui.item.Id);
                    return false;
                },
                search: function (event, ui) {
                    addBtn.hide();
                },
                select: function (event, ui) {
                    setup(ui);
                    return false;
                }
            })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.Id+ ", " + item.Name + "</a>")
                .appendTo(ul);
            };

.data 部分是您缺少的部分。一旦数据从自动完成中返回，您就不会用它做任何事情。

源不需要包含用户在搜索框中输入的术语。 Jquery 会自动将术语附加到您的查询字符串中。如果您观察 Firebug 中生成的请求，您将看到术语“查询”挂在 url 的末尾。