Implement auto complete dropdown using twitter bootstrup.

Sourav.Kayal
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 15789 red flag

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.


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)