Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript ASP.NET JQuery Autocomplete Textbox

ASP.NET JQuery Autocomplete Textbox

An example about using JQuery to load list of email addresses got from Generic Hander into the textbox.When user types text in this textbox, it supports auto-complete data due to file jquery.autocomplete.js.Beside that, user can get the selected ID for the selected email address 🙂

Here are the list of email addresses which are used to demonstrate in this demo.

Data - List of email addresses

Data - List of email addresses

And here is the results of this demo.

Auto complete when typing

Auto complete when typing

Get ID of selected email address

Get ID of selected email address

How to create autocomplete textbox using JQuery.

1. Design HTML layout as above image

<form id="form1" runat="server">
<div>
    Email Address : 
    <asp:TextBox  ID="txtEmailAddress" runat="server" Width="200">
    </asp:TextBox>
    <asp:RequiredFieldValidator ID="ReqEmail" SetFocusOnError="true" ControlToValidate="txtEmailAddress"     
       ErrorMessage="Please input email address!" runat="server" Display="Dynamic" />
    <input runat="server" id="hidEmailID" type="hidden" value="" />
     <asp:Button runat="server" id="btnGetEmailAddressID" Text ="Get Email Address ID" 
        onclick="btnGetValue_Click"></asp:Button>
</div>
</form>

<form id="form1" runat="server"> <div> Email Address : <asp:TextBox ID="txtEmailAddress" runat="server" Width="200"> </asp:TextBox> <asp:RequiredFieldValidator ID="ReqEmail" SetFocusOnError="true" ControlToValidate="txtEmailAddress" ErrorMessage="Please input email address!" runat="server" Display="Dynamic" /> <input runat="server" id="hidEmailID" type="hidden" value="" /> <asp:Button runat="server" id="btnGetEmailAddressID" Text ="Get Email Address ID" onclick="btnGetValue_Click"></asp:Button> </div> </form>

2. Include file jquery-1.2.6.js, jquery.autocomplete.js into project and declare to use them in Default.aspx

<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>    
<link rel="stylesheet" type="text/css" href="CSS/jquery.autocomplete.css"/>

<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="CSS/jquery.autocomplete.css"/>

3. JQuery to load data to textbox in page Default.aspx

This script request to Generic Handler named LoadEmailAddress.ashx to get data and load into txtEmailAddress

<script type="text/javascript">
$(document).ready(function() {
   $("#<%= txtEmailAddress.ClientID %>").autocomplete('LoadEmailAddress.ashx').
      result(function (event, data, formatted) { // data[0] : Email Address, data[1] : Email ID
          // Set Selected email ID to hidden field
          $("#<%= hidEmailID.ClientID %>").val(data[1]);                
    });
});      
</script>

<script type="text/javascript"> $(document).ready(function() { $("#<%= txtEmailAddress.ClientID %>").autocomplete('LoadEmailAddress.ashx'). result(function (event, data, formatted) { // data[0] : Email Address, data[1] : Email ID // Set Selected email ID to hidden field $("#<%= hidEmailID.ClientID %>").val(data[1]); }); }); </script>

4. Create Generic Handler file named “LoadEmailAddress.ashx”

This class includes a method called “ProcessRequest” that is responsible for writing list of email addresses to the HttpContext.Response.Output stream.
To understand more ASHX file, refer this link : ASHX

We aslo can create method to get data from database instead of creating data by hard code.

 
public void ProcessRequest (HttpContext context) {
    Dictionary<int, string> lstEmails = new Dictionary<int, string>();
    lstEmails.Add(1, "[email protected]");
    lstEmails.Add(2, "[email protected]");
    lstEmails.Add(3, "[email protected]");
    lstEmails.Add(4, "[email protected]");
    lstEmails.Add(5, "[email protected]");
    lstEmails.Add(6, "[email protected]");
    lstEmails.Add(7, "[email protected]");
    lstEmails.Add(8, "[email protected]");
    lstEmails.Add(9, "[email protected]");
    lstEmails.Add(10, "[email protected]");
 
    StringBuilder builder = new StringBuilder();
    foreach (KeyValuePair<int, string> item in lstEmails)
    {
        builder.Append(string.Format("{0}|{1}|{2}", 
                       item.Value, 
                       item.Key, 
                       Environment.NewLine));
    }
    context.Response.Write(builder.ToString());
}

public void ProcessRequest (HttpContext context) { Dictionary<int, string> lstEmails = new Dictionary<int, string>(); lstEmails.Add(1, "[email protected]"); lstEmails.Add(2, "[email protected]"); lstEmails.Add(3, "[email protected]"); lstEmails.Add(4, "[email protected]"); lstEmails.Add(5, "[email protected]"); lstEmails.Add(6, "[email protected]"); lstEmails.Add(7, "[email protected]"); lstEmails.Add(8, "[email protected]"); lstEmails.Add(9, "[email protected]"); lstEmails.Add(10, "[email protected]"); StringBuilder builder = new StringBuilder(); foreach (KeyValuePair<int, string> item in lstEmails) { builder.Append(string.Format("{0}|{1}|{2}", item.Value, item.Key, Environment.NewLine)); } context.Response.Write(builder.ToString()); }

Feb 22, 2012quynhnguyen

Source Code Demo page

Auto Rotate Web Page Title With JavaScriptJavaScript Alert Multiple Lines
You Might Also Like:
  • JQuery Allow only numeric characters or only alphabet characters in textbox
  • JQuery How to use DatePicker
  • JQuery Create Textbox With Count Down Limit Characters
  • Disable Auto Save Password In HTML Form Or TextBox
  • Disable Paste On Textbox With JavaScript
  • Jquery checkbox checked
  • ASP.NET Input only digits in TextBox using Ajax
  • Javascript Problem Set focus textbox on Firefox
  • Get Image Width Height With JQuery And JavaScript
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
quynhnguyen
9 years ago CSharp, JavascriptASHX, ASP.NET, autocomplete, JQuery, StringBuilder541
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
22,194 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
20,068 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
15,844 views
JQuery Allow only numeric characters or only alphabet characters in textbox
13,316 views
C# Read Json From URL And Parse/Deserialize Json
9,815 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • What Can I Expect From An Academic Essay Service?

  • Can Be Essay Service Companies Good For You?

  • Tips To Choosing The Ideal Essay Writers
  • How to Choose the Most Effective Free Photo Editor on the Web
  • How to Compose Your Essay To Me – 4 Easy Steps to Write My Essay
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (28)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (110)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development