Question

I have seen forks of the bootstrap typeahead plugin like this one here:

https://gist.github.com/1866577

However, I am not able to understand how to build the form elements I need for my web application. Basically, I would like my web application to mimic the functionality provided by the following website:

slugbooks.com

I need 3 autocomplete forms like they have on that website.. but I want to use Twitter Bootstrap as the rest of my web app is in Bootstrap. I need the first autocomplete like for the colleges… This is easy to do with the bootstrap typeahead plugin. I have figured this part out. Now the next to dropdowns with autocomplete is where it gets complex..

I have already learned how to make typeahead dropdowns thanks to this StackOverflow question:

Adding a dropdown button to Twitter bootstrap typeahead component

Now I just need a way to dynamically generate the data source for the drop downs based on which college is selected and then which department is selected. Also, selecting the appropriate course (3rd dropdown) should redirect me to a specific page (eg: site.com/college/coursename.html)

How would I accomplish this with Twitter Bootstrap Typeahead?

Data Example:

Colleges :

• UTEXAS
• UMIAMI
• USC
• STANFORD

Departments:

• 1,2,3 <= STANFORD
• 4,5,6 <= USC
• 7,8,9 <= UMIAMI
• A,B,C <= UTEXAS

Courses:

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

Warning: I’m a javascript/AJAX noob so please guide me well if javascript/AJAX is involved…

Answer 1

Here is something that should get you started : 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);
        });
    }
);

This simplistic example shows you how to :

• Set your own callback for selected items : see updater
• Reset a typeahead source (the very hard way) : see .data('typeahead', false)
• Use callback functions to load asynchronously
• Mess with people head in JS

Before any copy/paste, you should know that this uses only the standard typeahead plugin and nothing is done about error handling (input, ajax error, latency user-awareness)