Pages

Ruchi Tech

Monday 8 October 2012

How to create AutoComplete TextBox with ASP.NET and jQuery UI

This article explains how to use JQuery UI AutoComplete widget

AutoComplete - A feature that suggests text automatically based on the first few characters that a user types.

 Step:1 Add following code in "default.aspx" page


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

$(function () {
   $("[id$=txtAuto]").autocomplete({
   source: function (request, response) {

   $.ajax({
      url: "NameList.asmx/GetNameList",
 
      data: "{ 'Name': '" + request.term + "' }",
      dataType: "json",
      type: "POST", 
      contentType: "application/json; charset=utf-8",
      async: true,
      success: function (data) {               
                   var Details = [];
                   for (i = 0; i < data.d.length; i++) {
                         Details[i] = data.d[i].Name;
                                 } response(Details);
                        },
      error: function (result) {

                         }
          });
       }
    });
});

</script>


Add HTML Code:


<div class="demo">
    <div class="ui-widget">
       <label for="txtAuto">Enter Name: </label>
       <asp:TextBox ID="txtAuto" runat="server">
       </asp:TextBox>
    </div>
</div>


Step:2 Add Web Service and write following code in it.


[WebMethod]
public List<UserNameList> GetNameList(string Name)
{ 
  var emp = new UserNameList();  
  var fetchName = emp.GetEmpList()
  .Where(m => m.Name.ToLower().StartsWith(Name.ToLower()));
  return fetchName.ToList();       
}

public class UserNameList
{
  public int ID { get; set; } 

  public string Name { get; set; }
  public List<UserNameList> GetEmpList() 
  {
      List<UserNameList> emp = new List<UserNameList>();

      emp.Add(new UserNameList() { ID = 1, Name = "Arjun" });  
      emp.Add(new UserNameList() { ID = 2, Name = "Aaryan" });
      emp.Add(new UserNameList() { ID = 3, Name = "Anoop" });
  

      emp.Add(new UserNameList() { ID = 4, Name = "Bob" });
      emp.Add(new UserNameList() { ID = 5, Name = "Boby" });
      emp.Add(new UserNameList() { ID = 6, Name = "Cristen" });  
      emp.Add(new UserNameList() { ID = 7, Name = "Cris" });
      return emp;

  }
}


 Now run the application and check the output.It would be like this
You can download whole code here AutoCompleteTextBox


10 comments:

  1. Hi,Nice Jquery Code and i get a little knowledge about how to create automation of textbox in asp.net.

    Theosoft

    ReplyDelete
  2. I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again.
    BCOM 1st Year TimeTable 2020
    BCOM 2nd Year TimeTable 2020
    BCOM 3rd Year TimeTable 2020
    Agra BCom Time Table 2020
    Allahabad BCom Time Table 2020

    ReplyDelete
  3. You can now buy targeted YouTube subscribers or buy twitter followers so your post is seen more. Its worked so well for us.

    ReplyDelete

  4. Find HP Printer Customer Support and service options including driver downloads, diagnostic tools, check and troubleshooting info.

    ReplyDelete