jQueryUI自动完成插件不起作用

Question

I want to implement something like autocomplete feature like this:

http://jqueryui.com/demos/autocomplete/

However I cannot do that. Here is my code:

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

Nothing is showing as a dropdown in my textbox: tbSearch. What is going wrong here?

Answer 1

Two problems:

1. Your code comes before the HTML it wants to affect.
2. Even if you fix (1), you'll have the problem that the actual client-side "id" value will not be the value you coded into your ASP tag. You have to call some ASP thing to get the client-side value.

oh wait: also, it's ".click", not ".Click".

It would also be an extremely good idea to use the var keyword where you declare/define the "data" variable in the "success" handler.

edit — notice that in the example to which your question linked, the jQuery setup code is inside a jQuery "ready" handler. That will ensure that problem 1 is fixed. I'm not sure why you're wiring a "click" handler up to a "text box" element; if that generates an <input type="text"> tag then you won't get any clicks from that anyway (I don't think) ( edit that's wrong); even if you did, it's kind-of weird.

Answer 2

One issue I see here is that you're referencing ID "tbSearch" as follows:

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

Yet once the .NET framework renders this page, the client ID of the textbox will be much different. You can use the following instead to make sure the ID you're referencing in your jQuery code is correct:

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

A couple of things you can do to debug right off the bat:

1. Add an error handler to your jquery .ajax call.

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

2. Set a breakpoint in your web method. Are you hitting it?

Answer 3

As Keith pointed out, you are overwriting the response that you are getting from the server:

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

Perhaps what you are trying to do is:

data = data.split(" ");

When you click your text box, and the Click() event is fired, all you are doing is providing the Data for the autocomplete. You aren't actually invoking the drop down. To do that, you need to call the search method. Also, keep in mind that there is a minLength property which can prevent the drop-down from opening:

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

Answer 4

In your ajax request you are posting no data.

Assuming you are using this plugin http://docs.jquery.com/Plugins/autocomplete

try using

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

and returning an array in your web service

Answer 5

I'm making a few assumptions here, but it looks like you're using the autocomplete plugin incorrectly. You are attaching to the change event on a textbox, and based on the name of that textbox I'm assuming you're looking to use autocomplete for search suggestions based on what the user inputs.

If that is the case, then you simply need to attach the autocomplete functionality to the textbox in this way:

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

The plugin will take care of the AJAX request — you don't have to.

Answer 6

Remember that in ASP.NET the ID of the control is used when referring to it in the code file or code behind, and isn't the actual ID of the input field when rendered to HTML. View the source of your page to see the actual ID. You probably want something like this:

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

or

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

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

Hope that helps.

Answer 7

Your asp:TextBox , while having an ID set to "tbSearch", will not be exactly that when it goes to your browser. ASP.NET adds a bit to your ID that helps it identify your control server-side.

Try this instead:

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

Answer 8

Fully functioning example

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