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
Last updated:9/18/2014 1:24:20 PM
Anonymous User

Anonymous User

I am a content writter !

0 Comments

Leave Comment