我已经开始使用 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 :

suggestion – Used to render a single suggestion. If set, this has to be a precompiled template. The associated suggestion object will serve as the context. Defaults to the value of displayKey wrapped in a p tag i.e. <p>{{value}}</p>.

这样的事情应该可以工作:

$('.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用户选择条目后将显示在输入字段中。

关于javascript - 使用来自 JSON 数据的不同值，而不是使用 Typeahead 的 displayKey，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21895025/