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


Leave a Comment
  • Please add 4 and 8 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
  • Nice wiki

  • Nice article

  • Carsten Siemens edited Revision 4. Comment: typo

Page 1 of 1 (3 items)