In this blog , I’m explaining how to make a textbox 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 name availableTags. availableTags is a array type variable which is store city name. inside $(document).ready(function () {} 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 and add the above three files into your projects because it’s

mandatory for using the bootstrap libraries 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

in my next post i'll explain about Accordion using BootStrap in ASP.Net
  Modified On Sep-18-2014 01:24:20 PM

Leave Comment