Question

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

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

Answer 1

你应该使用带有typeahead.js的建议引擎（例如猎犬）。

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

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

它基于找到here的“死简单”示例。

代码如下：

// 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()
});

先前加载但不可见

1 个答案: