Javascript jQueryUI自动完成插件不工作_Javascript_Jquery_Jquery Ui_Jquery Plugins

Javascript jQueryUI自动完成插件不工作

javascript jquery jquery-ui jquery-plugins

Javascript jQueryUI自动完成插件不工作,javascript,jquery,jquery-ui,jquery-plugins,Javascript,Jquery,Jquery Ui,Jquery Plugins,我想实现自动完成功能，如下所示： $("#<%= tbSearch.ClientID %>").autocomplete({ ... 然而，我不能这样做。这是我的密码： <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../Scripts/jquery-1.4.1.js" type="text/java

我想实现自动完成功能，如下所示：

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

然而，我不能这样做。这是我的密码：

    <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
     });
 });


$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（'[id$=“tbSearch”]'）。自动完成({
资料来源：availableTags
});
});

我的文本框中没有显示下拉列表：tbSearch。这里出了什么问题？

两个问题：

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

即使您修复了（1），您也会遇到一个问题，即实际的客户端“id”值不是您编码到ASP标记中的值。您必须调用一些ASP来获取客户端值

哦，等等：还有，它是“.click”，不是“.click”

在“success”处理程序中声明/定义“data”变量时，使用

var

关键字也是一个非常好的主意

编辑-注意，在问题链接到的示例中，jQuery设置代码位于jQuery“就绪”处理程序中。这将确保问题1得到解决。我不知道为什么要将“单击”处理程序连接到“文本框”元素；如果这生成了一个

标记，那么无论如何你都不会从中得到任何点击（我不认为）（编辑这是错误的）；即使您这样做了，也有点奇怪。

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

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

然而，一旦.NETFramework呈现了这个页面，文本框的客户端ID就会大不相同。您可以使用以下方法来确保jQuery代码中引用的ID是正确的：

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

在web方法中设置断点。你在打吗

正如Keith指出的，您正在覆盖从服务器得到的响应：

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

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

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

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

假设你正在使用这个插件

试用

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

在您的web服务中返回一个数组

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

如果是这种情况，则只需通过以下方式将自动完成功能附加到文本框：

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

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

请记住，在ASP.NET中，在代码文件或代码隐藏中引用控件时使用控件的ID，而不是呈现为HTML时输入字段的实际ID。查看页面的源代码以查看实际ID。您可能需要以下内容：

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

$（“#”）自动完成({
...

或

$（“input.autocomplete”）.autocomplete({
...

希望对您有所帮助。

您的

asp:TextBox

，虽然将ID设置为“tbSearch”，但当它进入浏览器时，不会完全是这样。asp.NET在您的ID中添加了一点帮助它识别您的控件服务器端

请尝试以下方法：

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

全功能示例

<!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>


$（文档）.ready（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（'tbSearch'）。自动完成（可用标记）；
});

谢谢。我基本上是使用母版页来访问我的测试页。那么我应该把代码放在哪里呢？在Testing.aspx中。我不是ASP程序员，所以我不确定如何处理“id”问题；我知道这是一件非常简单的事情，但是它在Stackoverflow中到处都有答案。您链接到的示例代码显示了如何使用

$（document）.ready（function（）{…}）；

作为初始化代码。是的，但是：您仍在尝试将“click”处理程序附加到“tbSearch”中元素，您正试图将结果放入名为“ya”的元素中，该元素在代码中的任何位置都不会出现。我会在页面加载后立即调用此JQ。在成功处理程序中，您会收到参数“data”中的返回值，但您会用

msg.d.split.split（“”）覆盖此值

。这应该会导致javascript错误。我假设您希望拆分（在空格char上）通过数据参数传递的值。是的！但我在尝试运行页面时没有收到任何错误：（不！我没有使用我的WebMethod。我想是因为我在写tbSearch。单击function。但是，我想做的就像动态自动完成功能一样。哎呀，忘了在

$（“#tbSearch”）。单击（函数（）{

-应该是

$（'#'）。单击（函数（）{

@Marek:No.tbSearch是一个具有runat=“server”属性的文本框。@klm9971…hav

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

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

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

<!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>