Home > DeveloperSection > Blogs > AutoComplete TextBox using BootStrap in ASP.Net

AutoComplete TextBox using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 15489  View(s)
Rate this:

 

AutoComplete TextBox using BootStrap

 

 

 in ASP.Net

 

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

Don't want to miss updates? Please click the below button!

Follow MindStick