如何根据先前的选择在 twitter bootstrap 中为 typeahead 创建一个新列表？

Question

我在这里看到了类似这样的 bootstrap typeahead 插件的分支：

https://gist.github.com/1866577

但是，我无法理解如何构建我的 Web 应用程序所需的表单元素。基本上，我希望我的 Web 应用程序模仿以下网站提供的功能：

slugbooks.com

我需要 3 个自动完成表单，就像他们在那个网站上的一样。但我想使用 Twitter Bootstrap，因为我的 Web 应用程序的其余部分都在 Bootstrap 中。我需要像大学一样的第一个自动完成功能......这很容易通过引导输入插件来完成。我已经弄清楚了这部分。现在，具有自动完成功能的下拉列表的下一个是它变得复杂的地方..

由于这个 StackOverflow 问题，我已经学会了如何制作预先输入的下拉菜单：

Adding a dropdown button to Twitter bootstrap typeahead component

现在我只需要一种方法来根据选择的大学和选择的部门动态生成下拉列表的数据源。此外，选择适当的课程（第 3 个下拉菜单）应将我重定向到特定页面（例如：site.com/college/coursename.html）

我将如何使用 Twitter Bootstrap Typeahead 完成此任务？

数据示例：

学院：

• UTEXAS
• 迈阿密
• 南加州大学
• 斯坦福

部门：

• 1,2,3
• 4,5,6
• 7,8,9
• A,B,C

课程：

• 一个
• b
• c
• d
• e
• f
• g
• h
• i
• j
• k
• l

警告：我是 javascript/AJAX 菜鸟，所以如果涉及 javascript/AJAX，请指导我...

Answer 1

以下内容应该可以帮助您入门：Live demo (jsfiddle)

// This wrapping is here only for visibility on JSFIDDLE (and because it's fun)
!function(colleges, ajaxLoadDepartments){
    var $one = $('#one');
    var $two= $('#two');

    var loadSourceForTwoWith = function(item) {  // Function that reset the departments, accepts the name of the college
        $two.data('typeahead', false).val('');       // Clear departments
        ajaxLoadDepartments(item, function(departments) {     // This fonction should be the success of the ajax call
            $two.typeahead({                           // this ajax call should return the departments of the `item` college
                source: departments                    // as an array of strings
            }).focus();
        });
    };

    $one.typeahead({
        source: colleges,
        updater: function(item) { // Item is selected, should return item
            loadSourceForTwoWith(item);
            return item;
        }
    });

}( /* Don't bother too much with what's below, just use your what is above with your real code(ajax) and data */
    ['UTEXAS', 'UMIAMI', 'USC', 'STANFORD'],
    function(item, callback) {
        var jsonResponse = {
            'STANFORD' : ['X1','X2','X3'],
            'USC' : ['X4','X5','X6'],
            'UMIAMI' : ['X7','X8','X9'],
            'UTEXAS' : ['XA','XB','XC']
        };

        $.ajax('/echo/json/', {
            type: 'post',
            data: {json: JSON.stringify(jsonResponse[item])}
        }).done(function(data) {
            callback(data);
        });
    }
);

这个简单的示例向您展示了如何：

• 为所选项目设置您自己的回调：请参阅updater
• 重置预输入源（非常困难的方式）：参见.data('typeahead', false)
• 使用回调函数异步加载
• 在 JS 中与人头混淆

在任何复制/粘贴之前，您应该知道这仅使用标准的 typeahead 插件，并且没有对错误处理（输入、ajax 错误、延迟用户感知）做任何事情