метод typeahead для возврата связанных результатов

Question

Я не уверен, что правильно назвал это, но то, что мне нужно сделать, довольно просто в теории. В прошлом я использовал Twitter's typeahead.js для поиска значений из заранее определенного списка. Тем не менее, теперь мне нужно вернуть что-то другое, чем то, что пользователь вводит, в зависимости от того, что они набирают.

У меня есть список имен и идентификаторов - пользователь будет знать имя, но не идентификаторы. Когда они печатают имя, в раскрывающемся списке необходимо удалить любой идентификатор, связанный с этим именем.

Будет ли рамочный режим 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/

в частности, посмотреть на Пользовательские шаблоны