1

Although there are a lot of jquery autocomplete code in this forum. However I haven't found anything fitting to my SharePoint/ASP.NET web page case. I followed the jquery autocomplete link. It is helpful. But please look at

My code:

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
<script type="text/javascript">
    $(document).ready(function () {
        $("asp:TextBox#TextBox3").autocomplete({
            source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
        });
    });

</script>
 </asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<table>
      <tr><td>
        <asp:Label ID="Label4" runat="server" Text="Qode"></asp:Label></td><td>
           <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

        </td></tr>
</table>

Question 

1. Can I use the code ` $("asp:TextBox#TextBox3")?`
2. If the source comes from code behind instead of hard copy strings, how to do it?

Let's say in code behind:

        string[] source = new string[5];
        source[0] = "c++";
        source[1] = "java";
        source[2] = "php";
        source[3] = "coldfusion";
        source[4] = "javascript";

Then how to pass the array to jquery code? Many thanks.

Improve this question

1 Answer 1

Reset to default
3

With regards to your first question, if you're using ASP.net version 4 or higher you can set the ClientIDMode of the textbox to "static" and it will force the server to render the ClientID to be the same as the server ID. Then you can reference it normally in your jQuery code.

Ex.

<asp:TextBox ID="TextBox3" runat="server" ClientIdMode="static">`

$("#TextBox3")  // select your text box with standard jQuery id selector

If you're using an older version of ASP.net, you can insert server-side code into your .aspx to access the dynamic clientID that is generated. You would add this to your jQuery selector as well, but it would be a little different.

$("#<%= Textbox3.ClientID %>")

This should render the proper client ID to the browser and be handled by jQuery.

As for your second question, personally I would serialize the array to JSON and send that to jQuery. A good library do so is Json.Net (http://json.codeplex.com/), which has examples of how to use the library.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I used $(document).ready(function () { $("<%= TextBox3.ClientID %>").autocomplete({ but it is not working.
Check my code again, I had a typo in the selector. There should be a # before the <%= so that the jQuery selector works properly.
If you cannot utilize the 3rd party components such as jason.net you can go with JavaScriptSerializer. If your string is dynamic you could elect to host a thin Page Method that you can then use ajax against and obtain results dynamically.
Definitely look into Roman's idea of using an Ajax call against a PageMethod. That would give you a lot more flexibility in your code to have your autocomplete be data-driven off of SQL, XML, etc. The JavaScriptSerializer classes definitely work well also, but I've just grown accustom to using Json.net due to an earlier project that I took over. Keep in mind though that JavaScriptSerializer is a .net 3.5 addition, so if you are using an older version of the framework you won't be able to use it natively.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.