将 typeahead.js 个数组元素分配给变量

Question

我将这个预输入绑定到 <input> 框，它工作正常。我向服务器发送请求，服务器返回一个包含 3 个元素的数组。下拉框显示，displayKey 告诉输入框向用户显示什么。

事实是，我可以使用

获取用户事后选择的值

var a = $('#inputBox').val(); 之类的，但我需要所有三个数组元素 (partNumber, mfr, title) 作为单独的变量返回，我不确定我可以在这个函数中的什么地方分配这些元素。

// bloodhound
var partsList = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'pSearch.php?p=%QUERY',                
        wildcard: '%QUERY',
        filter: function (partsList) {        
            return $.map(partsList, function (itemNumber) {            
                return {
                    partNumber:   itemNumber.pn,
                    mfr:          itemNumber.mfr,
                    title:        itemNumber.neda                   
                };
            });
        }
    }
});


partsList.initialize();
// typeahead
$('.typeahead').typeahead(null, {
    displayKey: 'partNumber',    
    limit: 9,
    source: partsList.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile("<div><strong>{{partNumber}}</strong> > <div class='subtitle'>{{mfr}} > {{title}}</div></div>")
    }    
});

Answer 1

我四处搜索并使用 .on('typeahead:selected'

找到了解决方案

$('.typeahead').typeahead(null, {
    displayKey: 'partNumber',    
    templates: {
        suggestion: Handlebars.compile("<div><strong>{{partNumber}}</strong> > <div class='mfr_suggestion'>{{mfr}} > {{neda}}</div></div>")
    },    
    source: partsList.ttAdapter(),
    limit: 9}).on('typeahead:selected', function (obj, datum) {    
    console.log(datum.partNumber);
    console.log(datum.mfr);
    console.log(datum.title);
});

最初从 bloodhound 传递的 3 个变量可以使用 datum.[name] 约定按名称访问。

将 typeahead.js 个数组元素分配给变量

assign typeahead.js array elements to variables

javascript

jquery

typeahead.js