Question

我花了一些非生产性的时间，因为没有关于Bootstrap（2.3.2）预先指示的非常痛苦的指示，并且已经放弃了晚上并且希望一些专家可以指出我正确的方向。

我已经提供给我的基础框架的所有小测试都没问题，所以我知道基础知识是可以的，但每当我尝试使用我自己的feed和变量时，它都会崩溃..不是那不是真的..它没有！

以下是我的开发网络服务器上运行的实时Feed

http://54.194.148.89:3000/stations/all

这是尝试代码

<html>
<head>
    <title>Example</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
    <script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">

    <script>

        $('#stations').typeahead([{
            name: 'Search',
            valueKey: 'crs',
            remote: {
                url: 'http://54.194.148.89:3000/stations/all',
                filter: function (parsedResponse) {
                    // parsedResponse is the array returned from your backend
                    console.log(parsedResponse);

                    // do whatever processing you need here
                    return parsedResponse;
                }
            },
            template: [
                '<p class="station_name">{{station_name}} ({{crs}})</p>'
            ].join(''),
            engine: Hogan
        }]);

    </script>


</head>
<body>
<div class="hero-unit">
    <h1>Input Test</h1>

    <input id="stations" autocomplete="off"/>

</div>
</body>
</html>

最终，我希望名称下拉列表中的名称（crs），其值为 crs （我甚至没有考虑过分配值的位数）。请有人能让我摆脱痛苦。理想情况下，未来的最终结果将从页面读取JSON脚本并分配给本地存储区域以供使用，但现在只需工作就可以了。

编辑：只是澄清一下，这是开源数据页的开放式数据，而不是商业

额外编辑：当我把它作为正文但保留其他所有内容时它工作正常，所以我知道typeahead正在作为函数工作

<body>

    <input id="stations" autocomplete="off"/>

    <script>

        var jsonString = '[{"label":"System Administrator","value":"1"},{"label":"Software Tester","value":"3"},{"label":" Software Developer","value":"4"},{"label":"Senior Developer","value":"5"},{"label":"Cloud Developer","value":"6"},{"label":"Wordpress Designer","value":"7"}]';

        var jsonObj = $.parseJSON(jsonString);
        var sourceArr = [];

        for (var i = 0; i < jsonObj.length; i++) {
            sourceArr.push(jsonObj[i].label);
        }

        $("#stations").typeahead({
            source: sourceArr
        });

    </script>

</body>

Answer 1

您的代码看起来像是为typeahead.js提供选项，但您不包括该库。相反，您要包含Bootstrap library，其中包含typeahead feature。见SO answer。也许你正在做与此相反的事情。

听起来你可以使用带引导程序的typeahead.js;你必须首先包括Bootstrap：

如果你想在像Bootstrap这样的项目中使用它，你只需要 do是在Bootstrap之后包含typeahead.js的JavaScript文件 JavaScript文件并使用我们的配置选项。 [source]

听起来好像在Bootstrap 3中完全删除了Bootstrap预先输入功能，转而使用typeahead.js：

Typeahead已被删除，支持使用Twitter Typeahead。 [source]

您可以像这样包含typeahead.js：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.js"></script>
<script src="http://twitter.github.io/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css">

注意：除了包含typeahead.js文件之外，您还需要提供一些CSS样式以使其看起来不错。（有关详细信息，请read this。）

至于原始代码无效的原因，您需要将代码包装在文档就绪处理程序中。否则它会在遇到时执行，并且此时#stations选择器与任何内容都不匹配，因为<input id="stations" />元素还不是DOM的一部分。因此，输入元素永远不会使用提前输入功能。

<script>
#(document).ready(function() {
    $('#stations').typeahead(...);
});
</script>

这不是第二个示例的问题，因为在这种情况下，<script>元素位于<input>元素之后。

最后，你的第二个例子工作的另一个原因（虽然你的第一个没有）是因为“source”选项是Bootstrap .typeahead()函数的一个选项，而不是typeahead.js .typeahead()函数。如果在包含typeahead.js库后尝试该代码，则会出现以下错误：

错误：需要本地，预取或远程之一

Answer 2

我认为这可能比我原先想象的要简单。

我认为在dom元素可用之前就发生了预先绑定。尝试在后面记录的加载方法中包装你的先行初始化 - 就像这样：

$(function() {
    $('#stations').typeahead([{ ... }]);
});

然后看看你得到了什么。在我的盒子上测试时，这似乎至少触发了ajax调用（由于跨站点脚本问题而失败）。那个跨站点业务可能会在以后咬你，但至少这样做会使Ajax调用起火（至少对我而言）。

我再次看了你的“工作”样本。请注意，在这种情况下，div在脚本之前声明为。这可能就是为什么示例脚本至少会触发名称的Ajax查找而原始代码不是。

使用远程JSON预先输入

2 个答案: