Monday, 14 May 2018

025 Bootstrap Typeahead


Bootstrap Typeahead

Typeahead is a type of control , which show text before type is complete.You have to add "typeahead.js"  JavaScript library for this purpose.



Example

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script type="text/javascript">
                $(document).ready(function () 
         {
                  $('input.typeahead').typeahead({
                   name: 'accounts',
                   local: ['India', 'China', 'Brazil', 'USA', 'US', 'JAPAN', 'Bangladesh', 'Russia''Sweden','Alaska']
               });
           });
</script>
</head>
<body>
<div class="bs-example">
              <input type="text" class="typeahead" autocomplete="off" spellcheck="false">
</div>
</body>
</html>

Live Demo

Type :India/China/Brazil/USA/US/JAPAN/Bangladesh/Russia/Sweden/Alaska

Enter text below 


No comments:

Post a Comment

Effortless Slider Styling: Create Custom CSS Range Inputs in Seconds

What is Range Input  range in HTML ?                   Range Input  is a control that is present from very early version of HTML. Input Rang...