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.
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.
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> </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 Email
|
|||
|
|
15 comments :
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
@udham singh..
instead of lable id you can mention your hidden field id it will work for you..
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!!!!
Very useful blog post, thanks!
thanks for ur code
Thank you very much for your website in a clear way. It helps me a lot.
sir, i want to get value of textbox in cs page.
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
how to fetch the value from table after selection of record in textbox
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
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.
autocomplete doesn't work on online master page
Hello sir I want to add multiple id with selected text box...
help me plz...
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?