---
title: "AutoComplete TextBox using BootStrap in ASP.Net"  
description: "In this blog , I’m explaining how to make a textbox autocomplete using Bootstrap in ASP.NetExample  :-In This Example we Create Text Box AutoComplete"  
author: "Anonymous User"  
published: 2014-01-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/625/autocomplete-textbox-using-bootstrap-in-asp-dot-net  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# AutoComplete TextBox using BootStrap in ASP.Net

In this blog , I’m explaining how to make a [textbox](https://www.mindstick.com/articles/320/textbox-control-in-vb-dot-net) [autocomplete](https://www.mindstick.com/forum/156169/what-is-google-suggest-or-autocomplete) using Bootstrap in ASP.Net

##### Example :-

##

In This Example we Create Text Box AutoComplete

##### Form Design:-

```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>       <script src="Js/jquery-1.8.3.min.js"></script>    <script src="Js/jquery-ui-1.9.2.custom.min.js"></script>    <link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />    <link href="Content/style.css" rel="stylesheet" /></head><body>    <form id="form1" runat="server">        <div>            <center>         <h1>AutoComplete</h1>     </center>            <br /><br />            <center>        <div><h3>City Name : </h3><asp:TextBox ID="txtCity" runat="server" Width="180px" Height="35px"></asp:TextBox></div>            </center>        </div>    </form></body></html><script type="text/javascript">    $(document).ready(function () {         var availableTags = ["Allahabad", "Agra", "Amethi", "Bagpat", "Bulandsahar",       "Bijnore", "Bandra", "Mumbai", "Delhi", "Kanpur", "Aurangbad", "Jabalpur", "Indore", "Bhopal", "Rewa", "Hydrabad", "Balia", "Lohara", "BharatNagar", "Shankargarh", "Bara", "Jari"];        $("#txtCity").autocomplete({            source: availableTags        });    });</script>
```

Firstly create textbox and give id txtCity then call autocomplete () on txtCity and give [source](https://www.mindstick.com/interview/840/what-happens-if-the-both-source-and-destination-are-named-same) name availableTags. availableTags is a array type [variable](https://www.mindstick.com/articles/1807/objective-c-data-types-variables-object-creation) which is store city name. inside $([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {} function .

##### Use this BootStrap File :-

```
<script src="Js/jquery-1.8.3.min.js"></script><script src="Js/jquery-ui-1.9.2.custom.min.js"></script><link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
```

[Download](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) and add the above three files into your [projects](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects) because it’s

mandatory for using the bootstrap [libraries](https://answers.mindstick.com/qa/49244/which-company-is-ahead-in-classification-of-data-for-libraries-innovations) and methods.

##### Use AutoComplete Method :-

```
<script type="text/javascript">  $(document).ready(function () {       var availableTags = ["Allahabad", "Agra", "Amethi", "Bagpat", "Bulandsahar", "Bijnore",       "Cymphol", "Ciberian", "ColdFusion", "Erlang", "Fortran","Groovy", "Haskell", "Java",          "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];          //in this variable you set value according to you.       $("#txtCity").autocomplete({//in this line use autocomplete method            source: availableTags({        });    });</script>
```

##### Output

![AutoComplete TextBox using BootStrap in ASP.Net](https://www.mindstick.com/blogs/5b121304-9802-486c-8386-09322facd059/images/65397179-3228-4e81-941e-8701d873ab13.png)\
in my next post i'll explain about [Accordion using BootStrap in ASP.Net](https://www.mindstick.com/blog/626/Accordion%20using%20BootStrap%20in%20ASP%20Net)

---

Original Source: https://www.mindstick.com/blog/625/autocomplete-textbox-using-bootstrap-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
