Tamim Addari
Tamim Addari

Reputation: 7841

How to set up twitter typeahead from scratch?

I am having trouble setting up twitter typeahead. Heres what I have done.

  1. I created an index.html at my test folder.

  2. I saved the typeahead as typeahead.js inside the folder js.

But its still not working. Here is the code for the index.html

<body>
  <div>
        <input id="product_search" type="text" data-provide="typeahead"
          data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
   </div>
<script src="js/typeahead.js"></script>
</body>

And here is the full code.

Upvotes: 0

Views: 449

Answers (2)

Ala
Ala

Reputation: 1503

(typeahead) is not supported in bootstrap version (3.3.4) it is supported in version (2.3.2). So try the following:

<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"></script>
</head>

Upvotes: 2

sheshadri
sheshadri

Reputation: 1217

Always you should include first Jquery link after that bootstrap js then typeahead js then bootstrap css

<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
</head>

Upvotes: 1

Related Questions