Twitter typeahead.js模板设置被忽略

时间:2015-07-02 12:36:48

标签: javascript autocomplete typeahead.js typeahead twitter-typeahead

我在导航栏中有一个搜索框,它使用Twitter typeahead.js v0.11.1来调用WebApi并根据搜索框的输入返回结果,这样可以正常工作。

但是,当我尝试添加模板设置时,它们会被忽略,单个名称jsonProperty仍然是下拉列表中唯一返回的内容。

我已按照以下方式设置了预先输入

var matchList = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('SmartSearchDto'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    remote: {
        url:  'http://myserver/api/smartsearch/search?searchTerm=%QUERY',
        wildcard: '%QUERY'
    }
});
matchList.initialize();
$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    templates: {
            suggestion: function(data) { 
            return '<p><strong>' + data.name + '</strong> - ' +  data.entitytype + '</p>';
            }
        }
    },
    {
        displayKey: 'name',
        name: 'SmartSearchDto',
        source: matchList.ttAdapter()
    }
);

有什么明显的我在这里做错了吗?

1 个答案:

答案 0 :(得分:0)

发布后1分钟,我解决了这个问题:

 var matchList = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('SmartSearchDto'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    remote: {
        url:  'http://localhost:59019/api/smartsearch/search?searchTerm=%QUERY',
        wildcard: '%QUERY'
    }
});
matchList.initialize();
$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
    },
    {
        templates: {
            suggestion: function(data) { 
              return '<p><strong>' + data.name + '</strong> - ' + data.entitytype + '</p>';
            }
        },
        source: matchList.ttAdapter()
    }
);