Typeahead with HTML Form - 根据选择自动填充下一个单元格答案

【问题标题】：Typeahead with HTML Form - Auto Fill Next Cell Based on SelectionTypeahead with HTML Form - 根据选择自动填充下一个单元格
【发布时间】：2012-06-12 15:41:37
【问题描述】：

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

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

运行良好。我希望根据用户在前一个单元格中的选择自动选择该行中的下一个单元格，这是一个选择菜单。这是一个例子：

http://jsfiddle.net/WNpy5/

如果用户为州输入“新南威尔士州”，我希望将国家/地区设置为“澳大利亚”，但可以使用选择菜单进行更改。同样，如果用户选择“加利福尼亚”，我希望将国家/地区设置为“美国”。

我可以轻松地扩展用于 typehead State 字段的值数组以包含相应的国家/地区值（虽然不确定格式），但不确定这是否可行以及如何将它们联系在一起？

【问题讨论】：

标签： javascript jquery html

【解决方案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/

在演示中，当输入状态并且焦点从文本框移开时，它会自动选择国家。

【讨论】：

【解决方案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);
    }
});

【讨论】：

谢谢特里，我会检查你的插件扩展 - 看起来很有希望。