Typeahead 未显示建议列表答案

【问题标题】：Typeahead not showing suggestion listTypeahead 未显示建议列表
【发布时间】：2016-03-11 09:58:53
【问题描述】：

我一直在使用 Spring MVC 应用程序并尝试使用 Twitter Typeahead 来显示建议。然而问题是，虽然建议是从服务器正确获取的，但建议框根本没有出现。相同的代码以前可以工作，但现在不能工作。

我的 javascript 代码是：

var skillSuggestions=new Bloodhound({
        datumTokenizer:Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer:Bloodhound.tokenizers.whitespace,

        remote:{
            url:"/tags/get.html/?searchTerm=%QUERY",
            filter:function(x){
                return $.map(x,function(item){
                    return{value:item.name};
                });
            },
            wildcard:'%QUERY',

        }
    });

    skillSuggestions.initialize();

    $('#skill-name').typeahead({
        hint:true,
        highlight:true,
        minLength:1
    },{
        name:'value',
        displayKey:'value',
        source:skillSuggestions.ttAdapter()
    })

对于输入“j”，接收到的 json 响应是：

[{"id":"56d546f5535a3c819f080558","name":"Java","category":"Information Technology","subCategory":"Programming/Software","createdDate":1456817909648,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93f8e535a773c1f8cc846","name":"Javascript","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078158043,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93fa2535a773c1f8cc847","name":"JQuery","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078178030,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93fb7535a773c1f8cc848","name":"JavaSE","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078199012,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56e226a47b49d4215eaefa9a","name":"javahhhh","category":"hhhhh","subCategory":"jjjjjj","createdDate":1457661604324,"updatedDate":null,"createdBy":null,"modifiedBy":null}]

我想在建议中显示字段name。我错过了什么吗？请帮忙。我查看了here、here、here 等等，但不知道出了什么问题。

【问题讨论】：

这是做什么的？？ source:skillSuggestions.ttAdapter()
我认为链接 Typeahead 和 Bloodhound。文档不清楚
源是在您键入时向您显示数据的实际点。我想这是前面的 twitter 引导类型。检查它是否是这个twitter.github.io/typeahead.js/examples。如果是这样，那么您必须实现 substringMatcher 函数，以便在您键入时返回要显示的数据
@Reddy 不完全是。 substringMatcher 旨在用作使用本地预输入数据源的演示。
@AbhisekLamsal 你能在你的过滤器函数中加入一个console.log 语句并验证那里发生了什么吗？ filter:function(x){ return $.map(x,function(item){ console.log(item.name); return{value:item.name}; }); }

标签： javascript jquery json typeahead.js

【解决方案1】：

问题在于您的基准标记器。您在响应对象中的键 value 中进行标记，但该键在您的响应中不存在。 obj.whitespace 标记器接受要标记的对象键列表。

改变这个：

datumTokenizer: Bloodhound.tokenizers.obj.whitespace("Value"),

对此（例如）：

datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name", "category"),

当您更改分词器时，还需要更改显示为建议和所选选项的内容。您尝试在 typeahead 选项中使用这一行来做到这一点：

displayKey:'value',

...但同样，您引用了一个不存在的对象键 (value)。你想要密钥name。

display: 'name', // This is the object key you wish displayed

【讨论】：

经过 45 分钟的搜索，正是我所需要的。

【解决方案2】：

我将向您展示我是如何在我们的实施中解决它的。我们对数据使用identify 函数和filter 函数。

在这种情况下，通过 Web 服务返回的数据具有 id 属性和 name 属性。这些被映射到用于填充实际预输入建议的对象。

taSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("Value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    identify: function (obj) { return obj.Value; },
    remote: {
        url: "/service/url",
        filter: function (data) {
            if (data) {
                return $.map(data, function (object) {
                    return { Id: object.id, Value: object.name };
                });
            } else {
                return {};
            }
        },
        rateLimitBy: 'debounce',
        rateLimitWait: 400
    }
});

请注意，我映射回了一个 Id 属性和一个 Value 属性。检查您的案例以获取您的属性名称。

【讨论】：