Resources For IT Professionals
Post an article
Wikis - Page Details
  • First published by
  • When: 22 Jan 2013 2:03 AM
  • Last revision by (eMicrosoft Partne)
  • When: 6 Apr 2013 3:11 AM
  • Revisions: 6
  • Comments: 3
Options
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  Jquery AutoCompleteTextBox Server-Side Bind

Jquery AutoCompleteTextBox Server-Side Bind

Jquery AutoCompleteTextBox Server-Side Bind

Jquery Allow to creating AutoComplete TextBox, but it’s binded in client side with JS Array
I’will take an example of how to bound it in Server-Side

Step 0 :
Add the references the Jquery library in the code behind :
string JQeryCss = "../../Scripts/jquery-ui.css";
string JQerymin = "../../Scripts/jquery-1.4.1.min.js"

Step 1 :
Define in code-Behind the strings that you want to add to the AutoCompleteTextBox that will be visible with intelliscence :
public string ListOfKeyWord()
{
string ListOfKeyWord = "";
for (int i = 0; i < 10; i++)
{
ListOfKeyWord = ListOfKeyWord + "'" + "test" + i.ToString() + "‘,";
}
return ListOfKeyWord;
}

The essential that you must have a string that all words are separated by commas ',' 
For example :’test 0′,’test 1′,’test 2′,’test 3′,’test 4′,’test 5′

Note that is a simple example, Of course, you can get your item from a Database.

 
Step 2 :
Create a Literal control that we will put in a JS table in string format, we will inject it later in the Page : 
Literal ListItemjavascriptCode = new Literal();
ListItemjavascriptCode.Text = "<script>" +
"inheritData = " +
"[" +
ListOfKeyWord() +
"];" +
"</script> ";

Step3 :
Create another Literal Control that we will put in intelliscence behavior in string format, we will inject later in the Page : 
Literal javascriptCode = new Literal();
javascriptCode.Text = "<link href='" + JQeryCss + "' " +
"rel='stylesheet' type='text/css' /> " +
 
"<script type='text/javascript' src='" + JQerymin + "'></script>" +
"<script type='text/javascript' src='" + JQeryminui + "'></script>" +
"<script>$(function () { " +
"$('#" + this.TextBoxAutoComleate.ClientID + "').autocomplete({" +
"source: inheritData " +
"});" +
"});" +
 
" </script>";

JQeryCss, JQerymin :Jquery Library address
this.testtextbox.ClientID : The client ID of TextBox
inheritData: The table Of Items  (Step 2)

Step 4 :
Inject now the the two Literal controls created previously in the web page :
this.Page.Controls.Add(SetIntellissenceToTextBon );
this.Page.Controls.Add(ListItemjavascriptCode);

You can download this project to test this fonctionnality:
http://gallery.technet.microsoft.com/Jquery-AutoCompleteTextBox-ac8822c9


, , , , [Edit tags]
Leave a Comment
  • Please add 5 and 6 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Posted by
    on 30 Jan 2013 7:48 PM

    Nice wiki

  • Posted by
    on 30 Jan 2013 7:53 PM

    Nice article

  • Posted by
    on 6 Apr 2013 3:11 AM

    Carsten Siemens edited Revision 4. Comment: typo

Page 1 of 1 (3 items)