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

on
Introduction: 

In this article I will explain how to get id or value of selected item from jquery autocomplete textbox usingwebservice 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 fromWebService.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

Comments

Post a Comment