Question

这可能是一个noob问题，但我无法弄清楚为什么这段代码不起作用。仅供参考，这只是一个从少数国家撤出的县的样本清单。我根据之前的输入从php中提取列表，但这不是问题，列表很好，它的自动完成功能不起作用。

<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

有两个问题

您使用的是非常旧版本的bootstrap（2.1.1），它与jquery 1.9版本不兼容（此版本中有许多deprecated features removed，包括引导程序使用的$.browser扩展名） - 如果暂时无法升级到新版本的bootstrap，可以包含migration plugin来解决此问题
需要设置源选项而不是本地

试

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

演示：Fiddle

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

您完成了。谢谢。

无法让Twitter Typeahead在Bootstrap中工作

3 个答案: