预加载但不可见答案

【问题标题】：typeahead loading but not visible预加载但不可见
【发布时间】：2014-03-09 08:14:19
【问题描述】：

我是 typeahead.js 的新手，正在尝试实现一个简单的示例。

<!DOCTYPE HTML>

<html>
    <head>
        <script type='text/javascript' src='../libraries/jquery/jquery-2.1.0.js'></script>
        <script type='text/javascript' src='../libraries/typeahead/typeahead.bundle.js'></script>

        <title> CIQ-Flow </title>

    </head>

<body>
<input type='text' id="search"/>
<p> some text </p>
    <script>
$('#search').css("background-color",'blue');

$('#search').typeahead([
{
name: 'planets',
local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ]
}
]);
</script>
</body>

</html>

上面的例子只是试图在文本框中显示值。这应该是一个直截了当的例子，应该有效。不知道哪里出错了。一些提示或建议会有所帮助。

【问题讨论】：

标签： jquery typeahead.js

【解决方案1】：

您应该使用带有 typeahead.js 的建议引擎（例如 Bloodhound）。

这是一个 jsFiddle，向您展示如何实现解决方案

http://jsfiddle.net/Fresh/hk4ej/

它基于here 中的“Dead Simple”示例。

代码如下：

// instantiate the bloodhound suggestion engine
var planets = new Bloodhound({
datumTokenizer: function (d) {
    return Bloodhound.tokenizers.whitespace(d.planet);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [{
        planet: "Mercury"
    }, {
        planet: "Venus"
    }, {
        planet: "Earth"
    }, {
        planet: "Mars"
    }, {
        planet: "Jupiter"
    }, {
        planet: "Saturn"
    }, {
        planet: "Uranus"
    }, {
        planet: "Neptune"
    }]
});

// initialize the bloodhound suggestion engine
planets.initialize();

// instantiate the typeahead UI
$('#typeahead').typeahead(null, {
    displayKey: 'planet',
    source: planets.ttAdapter()
});

【讨论】：

嗨，感谢您的回复。但是它需要在服务器端执行吗？因为，当我将您的代码复制到 html 文件中并执行时，文本框中没有任何反应！我也没有从控制台收到任何错误。
如果将上述代码复制到 HTML 文件中，您还需要确保在部分中包含对 jQuery 和 typeahead.js javascript 文件的
感谢您的回复。我犯了一个愚蠢的错误。我的文本框有不同的 ID，您在回复中更改了它。感谢您的帮助
抱歉更改id！很高兴我能帮助@Adithya