更新

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

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

[
{"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：使用带有简单字符串的遥控器

1 个答案:

更新