Twitter Typeahead with Local Dataset -


i can't understand why tutorial example not work me:

i have external js libraries:

"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" "http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"

and code on load document:

<script type="text/javascript"> $(document).ready(function () {     $('input.typeahead').typeahead({         name: 'cars',         local: ['audi', 'bmw', 'bugatti', 'ferrari', 'ford', 'lamborghini', 'mercedes benz', 'porsche', 'rolls-royce', 'volkswagen']     }); }); </script>

i have css:

   <style type="text/css">         .bs-example {             font-family: sans-serif;             position: relative;             margin: 100px;         }         .typeahead, .tt-query, .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;         }         .typeahead {             background-color: #ffffff;         }         .typeahead:focus {             border: 2px solid #0097cf;         }         .tt-query {             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>

and html code:

<body>     <div class="bs-example">         <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">     </div> </body>

can me ?


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more