无法让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

你完成了。 谢谢。