In this article I will explain with an example, how to implement Bootstrap AutoComplete TextBox using jQuery TypeAhead plugin in ASP.Net with C# and VB.Net.
The Bootstrap AutoComplete TextBox will be populated with records from database table using jQuery AJAX and WebMethod (PageMethod) in ASP.Net.
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
Download and install Northwind Database
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox, a HiddenField and a Button.
The Bootstrap jQuery TypeAhead AutoComplete plugin has been applied to the TextBox. A jQuery AJAX call is made to the GetCustomers WebMethod (PageMethod) and the list of customers returned from the WebMethod (PageMethod) acts as source of data to the Bootstrap jQuery TypeAhead AutoComplete.
The data received from the server is processed inside the jQuery AJAX call success event handler. A loop is executed for each received item in the list of items and then an object with text part in the name property and value part in the id property is returned.
When an item is selected from the AutoComplete List of the Bootstrap jQuery TypeAhead AutoComplete, then the updater event handler is triggered which saves the ID of the selected item to the ASP.Net HiddenField control.
<link rel="stylesheet" href=''''''''http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css''''''''
media="screen" />
<script type="text/javascript" src=''''''''http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js''''''''></script>
<script type="text/javascript" src=''''''''http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js''''''''></script>
<script type="text/javascript" src="http://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
<link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" />
<script type="text/javascript">
$(function () {
$(''''''''[id*=txtSearch]'''''''').typeahead({
hint: true,
highlight: true,
minLength: 1
,source: function (request, response) {
$.ajax({
url: ''''''''<%=ResolveUrl("~/CS.aspx/GetCustomers") %>'''''''',
data: "{ ''''''''prefix'''''''': ''''''''" + request + "''''''''}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
items = [];
map = {};
$.each(data.d, function (i, item) {
var id = item.split(''''''''-'''''''')[1];
var name = item.split(''''''''-'''''''')[0];
map[name] = { id: id, name: name };
items.push(name);
});
response(items);
$(".dropdown-menu").css("height", "auto");
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
updater: function (item) {
$(''''''''[id*=hfCustomerId]'''''''').val(map[item].id);
return item;
}
});
});
</script>
Enter search term:
<asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" autocomplete="off"
Width="300" />
<asp:HiddenField ID="hfCustomerId" runat="server" />
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
Namespaces
You will need to import the following namespaces.
C#
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
The ASP.Net PageMethod
The following AJAX PageMethod accepts a parameter prefix and its value is used to find matching records from the Customers Table of the Northwind database.
The select query gets the Name and the ID of the customer that matches the prefix text.
The fetched records are processed and a Key Value Pair is created by appending the Id to the Name field in the following format {0}-{1} where is the Name {0} and {1} is the ID of the Customer.
C#
[WebMethod]
public static string[] GetCustomers(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactName, CustomerId from Customers where ContactName like @SearchText + ''''''''%''''''''";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["ContactName"], sdr["CustomerId"]));
}
}
conn.Close();
}
}
return customers.ToArray();
}
VB.Net
<WebMethod()>
Public Shared Function GetCustomers(prefix As String) As String()
Dim customers As New List(Of String)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "select ContactName, CustomerId from Customers where ContactName like @SearchText + ''''''''%''''''''"
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(String.Format("{0}-{1}", sdr("ContactName"), sdr("CustomerId")))
End While
End Using
conn.Close()
End Using
End Using
Return customers.ToArray()
End Function
Fetching the selected item on Server Side
The Key (Customer Name) and Value (Customer ID) can be fetched on server side inside the click event handler of the Button from the Request.Form collection as shown below.
C#
protected void Submit(object sender, EventArgs e)
{
string customerName = Request.Form[txtSearch.UniqueID];
string customerId = Request.Form[hfCustomerId.UniqueID];
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert(''''''''Name: " + customerName + "\\nID: " + customerId + "'''''''');", true);
}
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
Dim customerName As String = Request.Form(txtSearch.UniqueID)
Dim customerId As String = Request.Form(hfCustomerId.UniqueID)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert(''''''''Name: " & customerName & "\nID: " & customerId & "'''''''');", True)
End Sub
Screenshot
