typeahead方法返回相关结果

Question

我不确定要正确标题，但我需要做的事情在理论上相当简单。过去我使用Twitter的typeahead.js来查找预定义列表中的值。然而，现在我需要返回其他根据他们键入的内容，输入的内容。

我有一个名称和ID列表 - 用户将知道名称，但不知道ID。当他们输入名称时，下拉列表需要下拉与该名称关联的任何ID。

typeahead.js框架会为此工作吗？如果是这样，我该怎么做？我找不到任何在线文档（或者我不知道该怎么寻找？）

我的JSON看起来就像这样：

{ 
    "1": { 
     "name": "John", 
     "ID": "1234" 
    }, 
    "2": { 
     "name": "Bob", 
     "ID": "2345" 
    }, 
    "3": { 
     "name": "Matt", 
     "ID": "3456" 
    }, 
    "4": { 
     "name": "John", 
     "ID": "9874" 
    } 
} 

所以如果在“约翰用户类型“我要的下拉菜单返回两个值：

1234 
9874 

我不反对使用除了typeahead.js其他的东西，如果它不具有此功能。

Answer 1

typeahead.js仍然是您尝试完成的最佳选择。

这里是一个工作示例小提琴：

https://jsfiddle.net/5fspsx79/

var substringMatcher = function(strs) { 
return function findMatches(q, cb) { 
    var matches, substringRegex; 
    matches = []; 
    substrRegex = new RegExp(q, 'i'); 
    $.each(strs, function(i, str) { 
    if (substrRegex.test(str.name)) { 
     matches.push(str); 
    } 
    }); 
    cb(matches); 
}; 
}; 

var people = [{ 
    "name": "John", 
    "ID": "1234" 
},{ 
    "name": "Bob", 
    "ID": "2345" 
},{ 
    "name": "Matt", 
    "ID": "3456" 
},{ 
    "name": "John", 
    "ID": "9874" 
}]; 

$('#custom-templates .typeahead').typeahead(null, { 
    name: 'people', 
    display: 'ID', 
    source: substringMatcher(people), 
    templates: { 
    empty: [ 
     '<div class="empty-message">', 
     'unable to find any results.', 
     '</div>' 
    ].join('\n'), 
    suggestion: Handlebars.compile('<div>{{ID}}</div>') 
    } 
}); 

你只需要添加自定义模板。

有一个例子： http://twitter.github.io/typeahead.js/examples/

具体而言，看自定义模板