Bloodhound / typeahead：使用带有简单字符串的遥控器

Question

我正在尝试将 typeahead.js 与 bloodhound 结合使用，以便在用户输入时动态获取 input 字段的自动完成建议。然而，我是菜鸟，我不知道如何正确地做，而且我在网上发现了很多相互矛盾的例子，让我很困惑。

据我所知：编辑：根据评论中的建议更新代码：

我的html:

<input type="text" data-provider="typeahead" placeholder="Cerca..." id="txtAutoSearchBox" />

我的 JS：

        $(document).ready(function () {
    //setup bloodhound engine
    var suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: './Suggestions.ashx?query=%QUERY',
            wildcard: '%QUERY'
        }
    });

    suggestions.initialize();

    //assign it to input field
    $('#txtAutoSearchBox').typeahead({
        items: 4,
        displayKey: 'value',
        source: suggestions.ttAdapter()
    });        
});

每次用户在字段中输入内容时，我都可以确认对我的服务器的查询是正确的。服务器 returns 只是以下形式的字符串：

[
{"value": "test adsl"},
{"value": "test"},
{"value": "testi canzoni"},
{"value": "testo incanto"},
{"value": "testimoni di geova"},
{"value": "testo siamo uguali"},
{"value": "testo straordinario chiara"},
{"value": "testo see you again"},
{"value": "testo guerriero"},
{"value": "testosterone"}
]

但是，不会出现自动完成弹出窗口。如何编辑以上代码使其正常工作？

Answer 1

像这样使用bloodhound的过滤方法

filter: function(data) {
  return $.map(data, function(item) {
    return {
      'value': item
    };
  });
}

Bloodhound 对象应该如下所示

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: "http://output.jsbin.com/cajebe/1.json",
        filter: function(data){
            return $.map(data, function(item){
                return {'value' : item};
            });
        }
    }
});

PS: 来自服务器的数据应该是JSON格式

这是一个演示 http://jsfiddle.net/dhirajbodicherla/pegp21r7/35/

更新

Typeahead 缺少正确的参数。应该是

typeaheadjs: [ {options}, {datasets} ]

$('#txtAutoSearchBox').typeahead(null, { // <--- missing this null
    items: 4,
    displayKey: 'value',
    source: suggestions.ttAdapter()
});

Bloodhound / typeahead：使用带有简单字符串的遥控器

Bloodhound / typeahead : using remote with simple strings

javascript

typeahead.js

bloodhound

更新