Question

我想实现像这样的自动完成功能：

但是我做不到。这是我的代码：

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.autocomplete.js" type="text/javascript"></script>
    <link href="../Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/JScript-1.5.1.js" type="text/javascript"></script>
    <script src="../Scripts/jQueryUI.js" type="text/javascript"></script>

<script type ="text/javascript">
 $(function () {
     var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
     $('[id$="tbSearch"]').autocomplete({
         source: availableTags
     });
 });

<asp:TextBox ID="tbSearch" runat="server"></asp:TextBox>

我的文本框中没有显示任何内容：tbSearch。这里出了什么问题？

Answer 1

两个问题：

您的代码之前它想要影响的HTML。

即使你修复了（1），你也会遇到实际客户端“id”值不是你编码到ASP标签中的值的问题。你必须调用一些ASP来获取客户端值。
哦等等：也是，它是“.click”，而不是“.Click”。

在“success”处理程序中声明/定义“data”变量时，使用var关键字也是一个非常好的主意。

编辑 - 请注意，在您的问题链接的示例中，jQuery设置代码位于jQuery“ready”处理程序中。这将确保问题1得到解决。我不确定你为什么要将“点击”处理程序连接到“文本框”元素;如果它生成<input type="text">标记，那么无论如何你都不会得到任何点击（我不认为）（编辑那是错误的）;即使你这样做，也有点奇怪。

Answer 2

我在这里看到的一个问题是你引用了ID“tbSearch”，如下所示：

$("#tbSearch").autocomplete(data);

然而，一旦.NET框架呈现此页面，文本框的客户端ID将大不相同。您可以使用以下代码来确保您在jQuery代码中引用的ID是正确的：

$('#<%= tbSearch.ClientID %>').autocomplete(data);

你可以采取一些措施来立即调试：

在jquery .ajax调用中添加错误处理程序。

    error: function (xmlHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }

在Web方法中设置断点。你打它吗？

Answer 3

正如Keith所指出的那样，你正在覆盖从服务器获得的响应：

success: function (data) {                    
   data = msg.d.split(" ");             
   $('#<%= tbSearch.ClientID %>').autocomplete(data);                 
}

也许你想要做的是：

data = data.split(" ");

当您单击文本框并触发Click（）事件时，您所做的只是提供自动完成的数据。您实际上并没有调用下拉列表。为此，您需要调用搜索方法。另外，请记住，有一个minLength属性可以阻止打开下拉列表：

//Set the minLength to zero
$("#tbSearch").autocomplete("minLength", 0");
//Now invoke the search   
$("#tbSearch").autocomplete("search", "");

Answer 4

在您的ajax请求中，您没有发布任何数据。

假设您使用的是此插件http://docs.jquery.com/Plugins/autocomplete

尝试使用

$("#tbSearch").autocomplete("AgentList.aspx/LoadData");

并在您的网络服务中返回一个数组

Answer 5

我在这里做了一些假设，但看起来你错误地使用了自动完成插件。您附加到文本框上的更改事件，并根据该文本框的名称，我假设您希望根据用户输入的内容使用自动完成功能来搜索建议。

如果是这种情况，那么您只需要以这种方式将自动填充功能附加到文本框中：

$(document).ready(function() {
    $("#tbSearch").autocomplete("AgentList.aspx/LoadData");
});

该插件将处理AJAX请求 - 您不必这样做。

Answer 6

请记住，在ASP.NET中，当在代码文件或后面的代码中引用它时，将使用控件的ID，而不是在呈现为HTML时输入字段的实际ID。查看您的页面来源以查看实际ID。你可能想要这样的东西：

$("#<%= tbSearch.ClientID %>").autocomplete({
...

或

$("input.autocomplete").autocomplete({
...

<asp:TextBox ID="tbSearch" runat="server" CssClass="autocomplete"/>

希望有所帮助。

Answer 7

您的asp:TextBox虽然ID设置为“tbSearch”，但在进入浏览器时并不完全正确。 ASP.NET为您的ID添加了一些内容，以帮助它识别您的控制服务器端。

请改为尝试：

$('[id$="tbSearch"]').autocomplete({
    source : availableTags
});

Answer 8

功能齐全的例子

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {        
         var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $('#tbSearch').autocomplete(availableTags);
      });
    </script>
  </head>
  <body>
    <input type="text" id = "tbSearch" name="code">
  </body>
</html>

jQueryUI自动完成插件无法正常工作

8 个答案: