CODEWITHSUNDEEP
phpjquerytwitter-bootstrapbootstrap-typeaheadtypeahead.js
srt8driver
srt8driver

Reputation: 491

Can't get Twitter Typeahead to work in Bootstrap

This might be a noob issue, but I cannot figure out why this code is not working. FYI this is just a sample list of counties pulled from a state with just a few. I pull the list from php based on earlier inputs, but that is not the issue, the list is fine, its autocomplete not working.

http://jsfiddle.net/s4wx9/

<div>Local County:
    <input type="text" class="input-block-level required typeahead" id="county" name='county' placeholder="Local County" />
    <div>

<script>
    $("#county").typeahead({
        local: ["Apache", "Cochise", "Coconino", "Gila", "Graham", "Greenlee", "La Paz", "Maricopa", "Mohave", "Navajo", "Pima", "Pinal", "Santa Cruz", "Yavapai", "Yuma"]
    });
</script>

Upvotes: 1

Views: 4128

Answers (3)

Y. Joy Ch. Singha
Y. Joy Ch. Singha

Reputation: 3252

It works to me. Run this Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

<div>Cnty:
    <input type="text" class="input-block-level required typeahead" id="county" name='county' placeholder="Local County" />
    <div>


<script>
$("#county").typeahead({
   source: ["Apache", "Cochise", "Coconino", "Gila", "Graham", "Greenlee", "La Paz", "Maricopa", "Mohave", "Navajo", "Pima", "Pinal", "Santa Cruz", "Yavapai", "Yuma"]
    });
</script>

Include:These above

jquery-2.1.1.min.js
bootstrap.min.css
bootstrap.min.js

You are done. Thanks.

Upvotes: 0

grim
grim

Reputation: 6769

Just replace local by source in your javascript

$("#county").typeahead({
        source: ["Apache", "Cochise", "Coconino", "Gila", "Graham", "Greenlee", "La Paz", "Maricopa", "Mohave", "Navajo", "Pima", "Pinal", "Santa Cruz", "Yavapai", "Yuma"]
    });

Local is used with the standalone Typeahead library.

EDIT: Here's an updated jsfiddle: http://jsfiddle.net/s4wx9/1/

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

There are two problems

  1. You are using a very old version of bootstrap(2.1.1) which is not compatible with jquery 1.9 version (There are many deprecated features removed in this version including the $.browser extension which is used by bootstrap) - if you cannot upgrade to a new version of bootstrap for the time being you can include the migration plugin to fix this problem
  2. need to set the source option instead of local

try

$("#county").typeahead({
    source: ["Apache", "Cochise", "Coconino", "Gila", "Graham", "Greenlee", "La Paz", "Maricopa", "Mohave", "Navajo", "Pima", "Pinal", "Santa Cruz", "Yavapai", "Yuma"]
});

Demo: Fiddle

Upvotes: 1

Related Questions