Question

我正在尝试在文本框中使用jQuery自动完成UI小部件，但我没有运气来使用源代码。我有一个充满了名称的数据库，我希望自动完成工作，所以我创建了一个名为searchpreload.aspx的页面，它在url中查找变量并根据查询字符串变量查询数据库。

当我在搜索框中输入时，我正在使用键盘功能，因此我可以捕获需要发送的值。然后我从db中收集字符串：

 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的末尾。

jquery autocomplete source作为接收查询字符串的url

1 个答案: