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

Bootstrap Autocomplete Textbox Example in using C#, VB.NET

Nov 17, 2015

Here I will explain how to use
jQuery to implement bootstrap autocomplete textbox without typeheadjs in using c#, or bootstrap autocomplete textbox example in using c#,

Before implement this example first design one table userdetails in your database like as shown below

Column Name
Data Type
Allow Nulls
Once we design table in our database insert some dummy data in your table to use it in our application that would be like as shown below

Sample User Details table for bootstrap autocomplete textbox example in
Now open your aspx page and write the code like as shown below

<html xmlns="">
<title>Bootstrap Autocomplete Textbox Example without using Typehead.js</title>
<script type="text/javascript" src=""></script>
<link rel = "Stylesheet" href = ""></link>
<script type="text/javascript">
$(function () {
$('#txtSearch').keyup(function () {
url: "BootstrapAutoComplete.aspx/GetAutoCompleteData",
data: "{'username':'" + $('#txtSearch').val() + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var val = '<ul id="userlist">';
$.map(data.d, function (item) {
var itemval = item.split('/')[0];
val += '<li class=tt-suggestion>' + itemval + '</li>'
val += '</ul>'
$('#userlist li').click(function () {
error: function (response) {
$(document).mouseup(function (e) {
var closediv = $("#divautocomplete");
if (closediv.has( == 0) {
<style type="text/css">
ul li
list-style: none;
<form id="form1" runat="server">
<div style="position: absolute;left: 18%; z-index: 100; text-align:left;">
<input type="text" class="typeahead" id="txtSearch" placeholder="Type username to search" autocomplete="off" />
<div id="divautocomplete" class="tt-menu" style="display:none">

Now add following namespaces in code behind

C# Code

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Data.SqlClient;

After completion of adding namespaces you need to write the code like as shown below

public static List<string> GetAutoCompleteData(string username)
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB"))
using (SqlCommand cmd = new SqlCommand("select UserId,UserName from userdetails where UserName LIKE '%'+@SearchText+'%'", con))
cmd.Parameters.AddWithValue("@SearchText", username);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
result.Add(string.Format("{0}/{1}", dr["UserName"], dr["UserId"]));
return result;


Imports System.Collections.Generic
Imports System.Web.Services
Imports System.Data.SqlClient
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs)
End Sub
<WebMethod()> _
Public Shared Function GetAutoCompleteData(ByVal username As String) As List(Of String)
Dim result As New List(Of String)()
Using con As New SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB")
Using cmd As New SqlCommand("select UserId,UserName from userdetails where UserName LIKE '%'+@SearchText+'%'", con)
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


Check following demo for bootstrap autocomplete textbox example

Bootstrap autocomplete textbox example in using c#,
Download Sample Code Attached

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

Get the latest,, 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


Unknown said...

very user freindly thanks

Unknown said...

how can we get id from autocomplete to another textbox which i used in my qurey for database

Give your Valuable Comments

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

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