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:-
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="AutoComplete.aspx.cs"Inherits="AutoComplete"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
<linkhref="Content/style.css"rel="stylesheet"/>
</head>
<body>
<formid="form1"runat="server">
<div>
<center>
<h1>AutoComplete</h1>
</center>
<br/><br/>
<center>
<div><h3>City Name : </h3><asp:TextBoxID="txtCity"runat="server"Width="180px"Height="35px"></asp:TextBox></div>
</center>
</div>
</form>
</body>
</html>
<scripttype="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 :-
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="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
Leave Comment