使用Typeahead使用JSON数据中的不同值而不是displayKey

Question

我已经开始使用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？这甚至可以使用这个插件.任何帮助将不胜感激.

谢谢!

Answer 1

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

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

从文档:

suggestion - 用于呈现单个建议.如果设置,则必须是预编译模板.关联的建议对象将用作上下文.默认为displayKey包装在p标签中的值,即 <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在用户选择条目后将显示在输入字段中.

Answer 2

我不是jQuery/JavaScript-Guru.所以我更喜欢它的简单方法.只是为了理解我以后查看代码时的所作所为...

感谢Eric Saupe,我发现了一个智能解决方案:

//JSON FILE
[
    {
        "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 SCRIPT

   var stocks = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('company_name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 'javascripts/stockCodes.json'
    });

    stocks.initialize();

    $('.typeahead').typeahead(
        null, {
        name: 'stocks',
        displayKey: 'company_name',
        source: stocks.ttAdapter()
    }).on('typeahead:selected', function(event, data){            
        $('.typeahead').val(data.code);        
    });

只需使用github上的文档中描述的typeahead自定义事件.

希望,这会有所帮助(当它仅供我自己以后参考时).

的jsfiddle

Answer 3

您需要使用'displayKey'变量.请参阅下面的typeahead文档中的复制粘贴:

displayKey - 对于给定的建议对象,确定它的字符串表示形式.在选择建议后设置输入控件的值时将使用此选项.可以是键字符串,也可以是将建议对象转换为字符串的函数.默认为value.

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

您的具体代码将是这样的:

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) {
                // This should not be required, but I have left it incase you still need some sort of filtering on your server response
                return $.map(list, function(stock) { return { code: stock.code, company_name: stock.company_name }; });
            }
        }
    });

    stocks.initialize();

    $('.typeahead').typeahead(null, {
        name: 'stocks',
        displayKey: function(stock) {
           return stock.company_name;
        },
        source: stocks.ttAdapter()
    });

我在自己的网站上有一个非常相似的要求,我的工作没有问题.我没有尝试过这个特殊的例子,所以让我知道它是否有效.

请记得致电stocks.clearPrefetchCache();清除缓存以更轻松地跟踪错误.

Answer 4

如果我没读错的话，我相信这就是你想要的：

var stocksData = [{
    "Facebook": "fb",
}, {
    "Google": "goog",
}, {
    "Yahoo": "yhoo",
}, {
    "Apple": "aapl",
}, {
    "Royal Mail": "rmg.l",
}, ];

var stocks = new Bloodhound({
    datumTokenizer: function (d) {
                  for (var prop in d) {
                      return Bloodhound.tokenizers.whitespace(d[prop]);
                  }

    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 3,
    local: stocksData,
});

stocks.initialize();

$('input').typeahead(null, {
    name: 'stocks',
    displayKey: function(stocks) {
        for (var prop in stocks) {
            return prop;    
        }
    },
    source: stocks.ttAdapter()
});

您当然希望将本地更改为预取/远程，就像您对 json 文件所做的那样。

更新

小提琴