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