Aspdotnet-Suresh

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

How to Get Selected Value from Jquery Autocomplete textbox in asp.net

Aug 30, 2012
Introduction

In this article I will explain how to get id or value of selected item from
jquery autocomplete textbox using webservice in asp.net.
Description:
  
In previous articles I explained
AutoComplete with webservice, JQuery autocomplete textbox example, Ajax autocomplete extender example and many articles in JQuery using asp.net. In this article I will explain how to get id or values of selected item from jquery autocomplete textbox in asp.net.
To implement this concept first we need to design table in database to save user details in database.
Column Name
Data Type
Allow Nulls
UserId
int(set identity property=true)
No
UserName
varchar(50)
Yes
Location
nvarchar(max)
Yes
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="http://www.w3.org/1999/xhtml">
<head>
<title>Get selected userid from AutoComplete Textbox with webservice using jQuery</title>
<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">
$(document).ready(function() {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
source: function(request, response) {
$.ajax({
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) {
alert("Error");
}
});
},
select: function(event, ui) {
$('#lblUserId').text(ui.item.val);
}
});
}
</script>
</head>
<body>
<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" />
</div>
<div>&nbsp;</div>
<div>
Selected UserId:<b><label id="lblUserId" /></b>
</div>
</form>
</body>
</html>
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 = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

public WebService () {

//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
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))
{
con.Open();
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:="http://tempuri.org/")> _
<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)
con.Open()
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
Demo

Download sample code attached


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

Get the latest Asp.net, C#.net, 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

23 comments :

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 asp.net!!!!!
Thanks once again & God bless u!!!!

I_r_f_a_n said...

Very useful blog post, thanks!

Anonymous said...

thanks for ur code

Unknown 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.

Unknown said...

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


help me out ..


Thanks in advance

Unknown 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
query.
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...

travelsandar 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?

Unknown 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 asp.net.

Unknown 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) {
DoPostBack();
}
else {

//console.log('hi');
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];
inp1.id += len;
inp1.value = '';
inp1.style.width = 88 + "px";
x.appendChild(new_row);
}
}

you can reach me on vishalrkale@gmail.com

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?

Unknown 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.......

Unknown said...

The above code only work when direct select the textbox if i fire other drop down control selection change event or textbox change event on same page then it does not work please help me out as soon as possible.......

Anonymous said...

Hi, Its work very smooth but after getting value in hidden field i want to fire OnValueChanged event which is not work

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

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