aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

How to Get Selected Value from Jquery Autocomplete textbox in

Aug 30, 2012

In this article I will explain how to get id or value of selected item from
jquery autocomplete textbox using webservice in
In previous articles I explained
AutoComplete with webservice, JQuery autocomplete textbox example, Ajax autocomplete extender example and many articles in JQuery using In this article I will explain how to get id or values of selected item from jquery autocomplete textbox in
To implement this concept first we need to design table in database to save user details in database.
Column Name
Data Type
Allow Nulls
int(set identity property=true)
After completion table design enter some of user details in database to work for our sample.
Once table creation complete write the following code in aspx page

<html xmlns="">
<title>Get selected userid from AutoComplete Textbox with webservice using jQuery</title>
<link href="" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
function SearchText() {
source: function(request, response) {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/GetAutoCompleteData",
data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
dataType: "json",
success: function(data) {
response($.map(data.d, function(item) {
return {
label: item.split('/')[0],
val: item.split('/')[1]
error: function(result) {
select: function(event, ui) {
<form id="form1" runat="server">
<div class="demo">

<asp:HiddenField ID="hdnId" runat="server" />
<div class="ui-widget">
<label for="tbAuto">Enter UserName: </label>
<input type="text" id="txtSearch" class="autosuggest" />
Selected UserId:<b><label id="lblUserId" /></b>
If you observe above code in header section I added some of script and css files by using those files we have a chance to display auto complete text with css style and I mentioned url field as “WebService.asmx/GetAutoCompleteData” this mean we are calling GetAutoCompleteData method from WebService.asmx webservice and select event which is used to get the userid of selected text value.

To creat this webservice right click on your application >> Select Add New Item >> select Web Service >> Give name of service AutoCompleteService.asmx and click OK
Once webservice created open code behind file and write the following code

C# Code

using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
public class WebService : System.Web.Services.WebService {

public WebService () {

//Uncomment the following line if using designed components

public List<string> GetAutoCompleteData(string username)
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName,UserId from UserInformation where UserName LIKE '%'+@SearchText+'%'", con))
cmd.Parameters.AddWithValue("@SearchText", username);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
result.Add(string.Format("{0}/{1}", dr["UserName"], dr["UserId"]));
return result;
VB.NET Code:

Imports System.Collections.Generic
Imports System.Data.SqlClient
Imports System.Web.Services

''' <summary>
''' Summary description for WebService
''' </summary>
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService2
Inherits System.Web.Services.WebService

<WebMethod()> _
Public Function GetAutoCompleteData(ByVal username As String) As List(Of String)
Dim result As New List(Of String)()
Using con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
Using cmd As New SqlCommand("select DISTINCT UserName,UserId from UserInformation where UserName LIKE '%'+@SearchText+'%'", con)
cmd.Parameters.AddWithValue("@SearchText", username)
Dim dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
result.Add(String.Format("{0}/{1}", dr("UserName"), dr("UserId")))
End While
Return result
End Using
End Using
End Function
End Class

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


udham Singh said...

Dear suresh,

Thanx, for reply.

Above code is worked for me. Please tell me how to store value in hidden field instead of label.
Please reply asap.

Best Regards/-
Udham Singh

Suresh Dasari said...

@udham singh..
instead of lable id you can mention your hidden field id it will work for you..

DARR123 said...

Thanks a lot sir!!!!
I just love your site!!!!!
I was actually searching a lot for an autocomplete code in!!!!!
Thanks once again & God bless u!!!!

I_r_f_a_n said...

Very useful blog post, thanks!

Anonymous said...

thanks for ur code

Sandy Kp said...
This comment has been removed by the author.
Ramya said...

Thank you very much for your website in a clear way. It helps me a lot.

rahul Upadhyay said...

sir, i want to get value of textbox in cs page.

sandeep kumar said...

if i want to access the id of selected value in and how to redirect take that id on another page in .

help me out ..

Thanks in advance

Bhaskar Paranjape said...

how to fetch the value from table after selection of record in textbox

Anonymous said...

Very usefull article , but while selecting the name my ID is concanting with last selection.
could you tell me how to clear the last selection

Swapnil Nashte said...

This is a great code..
but i have a problem that how this function will
available to two different textboxes with different
like first textbox for State and another textbox
for City.

Anonymous said...

autocomplete doesn't work on online master page

Jitendra singh said...

Hello sir I want to add multiple id with selected text box...
help me plz...

Khinsandar Win said...

Thanks a lot of sir.It's really helpful.But I can't run on local.I downloaded css and js files as your links and put in local server.But it didn't work.How can I solve for it?

Amit Singh said...

Hi, Suresh i read ur all posts, i hv a task to

" Write an API to upload product ( suppose a picture) on ebay? in C#"

i hv't written before, can u plz help me, i'll ever greatfull to u.

Anonymous said...

Not working with master page

Anonymous said...

How can i use the same code without using from jquery autocomplete textbox using webservice in

vishal kale said...

Can you please help me out on auto-complete functionality with database on dynamically generated textboxes with java script. I am pasting my code of dynamically generated textboxes. Please help on this.
Thanks in advance.

function insRow() {

var tab = document.getElementById('POITable');
var size = tab.rows.length;

if (size == 1) {
else {

var x = document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
// var i1 = row.parentNode.parentNode.rowIndex;
// alert(i1);

var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; += len;
inp1.value = ''; = 88 + "px";

you can reach me on

Sam said...

When the selections appear they aren't "holding". That is as soon as I move to select one it vanishes.
The text box is in a modal popup, so is that causing the issue?

Ajinkya Satvi said...

The above code only work if i use simple aspx page but whenever i use user control on this page it does not work. please help me out as soon as possible.......

Give your Valuable Comments

Other Related Posts

© 2010-2012 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.