1

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

https://gist.github.com/1866577

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

slugbooks.com

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

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

向 Twitter bootstrap typeahead 组件添加下拉按钮

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

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

数据示例：

学院：

  • 犹他州
  • UMIAMI
  • 南加州大学
  • 斯坦福

部门：

  • 1,2,3 <= 斯坦福
  • 4,5,6 <= 南加州大学
  • 7,8,9 <= UMIAMI
  • A,B,C <= UTEXAS

培训班：

  • 一个 <= 1
  • b <= 2
  • c <= 3
  • d <= 4
  • e <= 5
  • f <= 6
  • g <= 7
  • h <= 8
  • 我 <= 9
  • j <= A
  • k <= B
  • l <= C

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

4

1 回答 1

1

这是应该让你开始的东西：现场演示（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 错误、延迟用户意识）做任何事情

于 2012-10-09T22:49:44.467 回答