Home > DeveloperSection > Articles > Bootstrap Typeaheads

Bootstrap Typeaheads


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

Bootstrap Typeaheads

In this article I’m explaining about Bootstrap Type heads. The typeahead input fields are very popular in modern web forms. Twitter Bootstrap Type heads jQuery plugin for auto completion. The main purpose of typeahead is to improve the user experience by supplying hints or a list of possible choices based on the text they've entered while filling a from or searching something — like the Google search.

If your web application needs a fully-featured queryable search box, typeahead.js can help. Some of its capabilities and features include:

Download typeahed.min.js file from
 //cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js

 

Example

Use these four files

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.9.1.min.js"></script>

<script src="~/Scripts/bootstrap.min.js"></script>

<script src="~/Scripts/typeahead.min.js"></script>

JavaScript Code

 

<script type="text/javascript">

    $(document).ready(function () {

        $('input.typeaheads').typeahead({

            name: 'accounts',

            local: ['Rohit','Pawan','Sumit','Sunil','Manoj','Anchal','Kamlakar',

'Rohan','Ravi','Raj']

        });

    });

</script>

 

CSS Code Here

<style type="text/css">

    .typeahead-div {

        font-familysans-serif;

        positionrelative;

        margin100px;

    }

 

    .typeaheads.fill-typeahead.tt-hint {

        border2px solid #CCCCCC;

        border-radius8px;

        font-size24px;

        height30px;

        line-height30px;

        outlinemedium none;

        padding8px 12px;

        width396px;

    }

 

    .typeaheads {

        background-color#FFFFFF;

    }

 

        .typeaheads:focus {

            border2px solid #0097CF;

        }

 

    .fill-typeahead {

        box-shadow0 1px 1px rgba(0, 0, 0, 0.075) inset;

    }

 

    .tt-hint {

        color#999999;

    }

 

    .tt-dropdown-menu {

        background-color#FFFFFF;

        border1px solid rgba(0, 0, 0, 0.2);

        border-radius8px;

        box-shadow0 5px 10px rgba(0, 0, 0, 0.2);

        margin-top12px;

        padding8px 0;

        width422px;

    }

 

    .tt-suggestion {

        font-size24px;

        line-height24px;

        padding3px 20px;

    }

 

            .tt-suggestion.tt-is-under-cursor {

                background-color#0097CF;

                color#FFFFFF;

            }

 

        .tt-suggestion p {

            margin0;

        }

</style>

 

Html Code Here

 

<div class="container" style="width50%;">

    <div class="typeahead-div">

        <input type="text" class="typeaheads fill-typeahead" autocomplete="off" spellcheck="false">

    </div>

</div>

Output

Bootstrap Typeaheads

 


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

Follow MindStick