Question

我想我已经有5个小时了，因为我正在努力使用typeahead.js库。我尝试使用远程功能加载数据，但我没有任何运气让它完全正常工作。

这些是我加载的js库：

<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/handlebars-v3.0.3.js"></script>
<script src="/Scripts/typeahead.bundle.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

然后，为了初始化我的先行功能，我使用了这段代码：

$(function () {
    var cards = new Bloodhound({
        datumTokenizer: function (datum) {
            console.log(datum);
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/home/suggest?searchQuery=%QUERY',
            wildcard: '%QUERY',
            filter: function (response) {
                return $.map(response, function (item) {
                    return {
                        value: item.Text,
                        tokens: item.Document
                    }
                });
            }
        }
    });

    cards.initialize();

    $(".typeahead").typeahead({
        hint: true,
        highlight: true,
        minLength: 3
    },
    {
        name: 'CardSearch',
        displayKey: 'value',
        valueKey: 'value',
        source: cards.ttAdapter()
    }).on('typeahead:render', function(ev, suggestion, isAsync, dsName) {
        console.log(suggestion, isAsync, dsName);
    }).on('typeahead:asyncreceive', function(ev, query, dsName) {
        console.log(query, dsName);
    });
});

从我的调试步骤中我意识到远程数据检索工作正常，因为：

a）在firefox / firebug中我看到了请求和响应

b）我已在console.log分配的函数中添加filter语句，一切正常。

......一切都停在这里......没有任何东西显示为下拉列表，而且提示也不起作用......

我接下来要做的是在console.log和typeahead:render事件上添加一些typeahead:asyncreceive语句，我看到的是所有参数（jquery事件除外）都是undefined，这让我相信，某种程度上，预先没有正确初始化。

如果您有任何想法或建议，请给我一个提示。

谢谢！

稍后编辑：这就是生成的HTML的样子：

<div class="col-sm-3 col-md-3 pull-right">
<form action="/Home/Search" class="navbar-form" method="get" role="search">
<div class="input-group">
  <input class="form-control typeahead" id="query" name="query" placeholder="Search" type="text" value="" />
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
</div>
</form>

typeahead.js不会使用远程数据

0 个答案: