articles

Home / DeveloperSection / Articles / Bootstrap Typeaheads

Bootstrap Typeaheads

Anonymous User7713 19-Aug-2014

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-family: sans-serif;
        position: relative;
        margin: 100px;
    }
 
    .typeaheads, .fill-typeahead, .tt-hint {
        border: 2px solid #CCCCCC;
        border-radius: 8px;
        font-size: 24px;
        height: 30px;
        line-height: 30px;
        outline: medium none;
        padding: 8px 12px;
        width: 396px;
    }
 
    .typeaheads {
        background-color: #FFFFFF;
    }
 
        .typeaheads:focus {
            border: 2px solid #0097CF;
        }
 
    .fill-typeahead {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    }
 
    .tt-hint {
        color: #999999;
    }
 
    .tt-dropdown-menu {
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        margin-top: 12px;
        padding: 8px 0;
        width: 422px;
    }
 
    .tt-suggestion {
        font-size: 24px;
        line-height: 24px;
        padding: 3px 20px;
    }
 
            .tt-suggestion.tt-is-under-cursor {
                background-color: #0097CF;
                color: #FFFFFF;
            }
 
        .tt-suggestion p {
            margin: 0;
        }
</style>

 

Html Code Here

 

<div class="container" style="width: 50%;">
    <div class="typeahead-div">
        <input type="text" class="typeaheads fill-typeahead" autocomplete="off" spellcheck="false">
    </div>
</div>

Output

Bootstrap Typeaheads

 


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By