我已经开始使用Typeahead.js,并且正在努力寻找一种允许用户键入和搜索公司名称的方法,一旦选择输入相关的公司代码即可。

.json文件:

[{
    "company_name": "Facebook",
    "code": "fb",
}, {
    "company_name": "Google",
    "code": "goog",
}, {
    "company_name": "Yahoo",
    "code": "yhoo",
}, {
    "company_name": "Apple",
    "code": "aapl",
}, {
    "company_name": "Royal Mail",
    "code": "rmg.l",
}]

.js脚本:
var stocks = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.code);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 3,
    prefetch: {
        url: 'javascripts/stockCodes.json',
        filter: function(list) {
            return $.map(list, function(stock) {
                return {
                    code: stock
                };
            });
        }
    }
});

stocks.initialize();

$('.typeahead').typeahead(null, {
    name: 'stocks',
    displayKey: 'code',
    source: stocks.ttAdapter()
});

当前,当用户在输入字段中键入时,这仅显示代码列表。但是,我想知道是否有一种方法可以让他们搜索code,但是一旦选择,文本框中的值就是company_name吗?使用此插件是否有可能。任何帮助将不胜感激。

谢谢!

最佳答案

displayKey用于指示用户选择条目后,哪个键应显示在输入字段的下拉列表中。

如果希望下拉列表中显示的条目的与输入字段中的不同,则需要使用自定义模板。

documentation:



这样的事情应该起作用:

$('.typeahead').typeahead(null, {
    name: 'stocks',
    displayKey: 'company_name',
    source: stocks.ttAdapter(),
    templates: {
        suggestion: function (stock) {
            return '<p>' + stock.code + '</p>';
        }
    }
});

提交的模板将用于在下拉列表中显示stock.code,而stock.company_name将在用户选择条目后显示在输入字段中。

10-07 19:27
查看更多