無法讓Twitter Typeahead在Bootstrap中工作

Question

這可能是一個noob問題，但我無法弄清楚為什么這段代碼不起作用。 僅供參考，這只是一個從少數國家撤出的縣的樣本清單。 我根據之前的輸入從php中提取列表，但這不是問題，列表很好，它的自動完成功能不起作用。

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>

Answer 1

只需在您的JavaScript中替換local source

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

Local與獨立的Typeahead庫一起使用。

編輯：這是一個更新的jsfiddle： http ： //jsfiddle.net/s4wx9/1/

Answer 2

有兩個問題

1. 您正在使用與jquery 1.9版本不兼容的非常舊版本的bootstrap（2.1.1）（此版本中刪除了許多已棄用的功能 ，包括引導程序使用的$ .browser擴展名） - 如果您無法升級到一個新版本的bootstrap目前你可以包含遷移插件來解決這個問題
2. 需要設置源選項而不是本地選項

嘗試

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

演示： 小提琴

Answer 3

它對我有用。 運行此代碼：

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

包括：以上這些

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

你完成了。 謝謝。