Search code examples
phpjquerytwitter-bootstrapbootstrap-typeaheadtypeahead.js

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>

Solution

  • 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/