如何使用typeahead.js

时间:2015-07-01 08:01:39

标签: typeahead.js bloodhound

我可能正在使用错误的工具,所以如果合适,请推荐其他方法。我很确定我的问题出在我的先行方法而不是血腥的方法中。

我需要按personName搜索,但填写personId表单提交。我有一个工作的控制器方法,将结果作为带有id和name的哈希数组传递。示例结果如下:

[{"1":"Nominee Employee"},{"2":"User Employee"}]

我找不到满足我需求的文档。我知道Bloodhound代码正在调用我的控制器方法,因为日志显示查询正在发生。我只是没有看到任何说“这就是你如何从记录中获取特定属性来显示。”

var names = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/employee/lastNameOptions?term=%QUERY',
        wildcard: '%QUERY'
    }
});

 $('#bloodhound .typeahead').typeahead(null, {
     name: 'names',
     display: 'name',
     source: names
 });

我希望当前的实现至少尝试打印1: Joe Schmo,但它正在加载一个空的下拉框,因此它必须“了解”结果。

谢谢!

1 个答案:

答案 0 :(得分:0)

我相信你可以像这样过滤猎犬的结果

remote: {
  url: '/employee/lastNameOptions?term=%QUERY',
  wildcard: '%QUERY',
  filter: $.map(data, function(v, i){ 
    var o = Object.keys(v); 
    return { id: o[0], name: v[o[0]] }; 
  });
}

这会将数据格式化为像这样的对象

{
  "id": "1",
  "name": "Nominee Employee"
}

typeahead可以像这样修改

$('#bloodhound .typeahead').typeahead(null, {
     name: 'names',
     displayKey: 'name',
     source: names
 });