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
|
|||
23 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?
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.
Not working with master page
How can i use the same code without using from jquery autocomplete textbox using webservice in asp.net.
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
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?
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.......
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.......
Hi, Its work very smooth but after getting value in hidden field i want to fire OnValueChanged event which is not work
Note: Only a member of this blog may post a comment.