Autocomplete Textbox in Jquery with ID (hidden)

Hello friends ,
Today I am going to post Auto complete textbox using Jquery with hidden Id.
When we develop Autocomplete text box then we need to show the Name and Id should be hidden, at the time of saving data we need ID.
Same scenario we are going to cover in this post, hope it will be helpful.

Task: Create a autocomplete textbox with employee Name and Id (Id should be hidden)
 
Add jquery reference on the page :

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

we need above three references.

Now take textbox and hidden field 

  <input type="text" id="txtEmployee" />

 <input type="hidden" id="hdnEmpId" />

/*we can take aspx control instead of html control it's up to u*/

Copy & paste the below code inside the script block:

  #("#txtEmployee").autocomplete({

                 source: function (request, response) {

                      #("#hdnEmpId").val("0");/* set the intial id =0  */                 

                      #ajax({

                         url: "testJquery.aspx/getEmployeList",/*web method path*/

                         data: "{'prefixText': '" + request.term + "'}",

                         dataType: "json",

                         type: "POST",

                         contentType: "application/json; charset=utf-8",

                         dataFilter: function (data) { return data; },

                         success: function (data) {

                             response($.map(data.d, function (item) {

                                 return { label: item.ename,/*property Names */

                                          value: item.ename, 

                                          id: item.eid 

                                        }

                             }))

                         },

                         error: function (XMLHttpRequest, textStatus, errorThrown) {

                             var err = eval("(" + XMLHttpRequest.responseText + ")");

                             alert(err.Message);

                         }

                     });

                 },

                 minLength: 1,//define the length of letter

                 noCache: false,

                 select: function (event, ui) {

                      #("#txtEmployee").val(ui.item.value);/* set the value on selection*/

                      #("#hdnEmpId").val(ui.item.id);/* set the Id on selection*/

                    

                 }

             });

Now next step to create the web method 
Note :instead of web method we can use Handler,web service ,xml as per your requirement .

[WebMethod]

    public static List<emp> getEmployeList(string prefixText)

    { 
       /* I assume that u select data on the basis of parameter either from database or list */
        

         //You can get data from data base and add in list

        List<emp> employee= new List<emp>();

        employee.Add(new Country { eid  = "1", ename = "Manoj" });

        employee.Add(new Country { eid  = "2", ename = "Singh" });

        employee.Add(new Country { eid  = "3", ename = "Suraj" });
        employee.Add(new Country { eid  = "4", ename = "Vishal" });
        employee.Add(new Country { eid  = "5", ename = "Deepak" });
        employee.Add(new Country { eid  = "6", ename = "Prashant" });
        employee.Add(new Country { eid  = "7", ename = "Pankaj" });

        return employee;

    }

 Now our autocomplete textbox is ready to use.


Happy coding.