Typeahead with HTML Form -根据选定内容自动填充下一个单元格

Question

我正在使用带有HTML表单的Twitter bootstrap-typeahead插件：

http://twitter.github.com/bootstrap/javascript.html#typeahead

它工作得很好。我希望行中的下一个单元格，这是一个选择菜单，根据用户在前一个单元格中的选择，自动选择一个选项。下面是一个例子：

http://jsfiddle.net/WNpy5/

如果用户输入“新南威尔士州”，我希望国家设置为“澳大利亚”，但使用选择菜单更改此选项。同样，如果用户选择"California“，我希望将国家设置为"USA”。

我可以轻松地扩展用于typehead State字段的值数组，以包含相应的country值(虽然不确定格式)，但不确定这是否可行，以及如何将其整合在一起？

Answer 1

您需要一个javascript对象数组，用于国家/地区及其各自的州：

var countries = [{ name: 'USA',
                   states: ['Alabama', 'Alaska']},
                 { name: 'Australia',
                   states: ['New South Wales', 'Queensland']}]; // You can add rest of the states here

演示： http://jsfiddle.net/WNpy5/1/

在demo中，当输入state并将焦点从textbox移开时，它会自动选择country。

Answer 2

typeahead插件默认情况下只接受一个字符串列表。我创建了一个接受JSON对象数组的扩展，我相信这就是您正在寻找的特性。

来源在这里：https://github.com/tcrosen/twitter-bootstrap-typeahead

对于您的案例，示例如下：

var states = [{ state: 'NY', country: 'USA'}, 
              { state: 'Ontario', country: 'Canada'}, 
              { state: 'Petoria', country: 'Petoria'}];

$('#myTextBox').typeahead({
    source: states,
    display: 'state',
    val: 'country',
    itemSelected: function(item, val, text) {
        // val = name of the country
        // text = name of the provice
        $('#Country').val(val);
    }
});