How to implement dropdown list with search option using twitter bootstrup
Implement auto complete dropdown using twitter bootstrup
In this
article we will see how to implement auto complete dropdown using twitter bootstrap.
Here we will see step by step implementation of this example.
Add below code in .aspx file
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="SearchPage.aspx.cs" Inherits="SearchPage"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.css"
rel="stylesheet">
</head>
<body>
<form id="form1" runat="server">
<input type="text" placeholder="Doctor Type" id="Sub" AutoCompleteType="Disabled" size="30">
<script>
var Subject = ["ASP.NET", "SAP", "JAVA", "C#", "PHP", "SQL"];
$('#Sub').typeahead({
source: Subject });
</script>
</form>
</body>
</html>
How to set maxLength and minLength property ?
In previous example search result is coming
pretty well, now if we want to configure more in search then we have to set few
property and minLength /maxLength is two of them.
If we set minLength and maxLength
property then search will happen by depending on exact matching length of
search string.
For example if we set minLength = 2
then search result will show if it matches with atlease 2 character.
Below example will show demonstration
of minLength property.
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="SearchPage.aspx.cs" Inherits="SearchPage"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.css"
rel="stylesheet">
</head>
<body>
<form id="form1" runat="server">
<input type="text" placeholder="Doctor Type" id="Sub" AutoCompleteType="Disabled" size="30">
<script>
var Subject = ["ASP.NET", "SSAP", "JAVA", "C#", "PHP",
"SQL"];
$('#Sub').typeahead({
minLength: 2,
source: Subject
});
</script>
</form>
</body>
</html>
In same way we can specify maxLength
property.