title: How to create a new list for typeahead in twitter bootstrap depending on a previous selection?
body: <p>I have seen forks of the bootstrap typeahead plugin like this one here:</p>
  
  <p><a href="https://gist.github.com/1866577" rel="nofollow noreferrer">https://gist.github.com/1866577</a></p>
  
  <p>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:</p>
  
  <p><a href="http://www.slugbooks.com" rel="nofollow noreferrer">slugbooks.com</a></p>
  
  <p>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..</p>
  
  <p>I have already learned how to make typeahead dropdowns thanks to this StackOverflow question:</p>
  
  <p><a href="https://stackoverflow.com/questions/10689830/adding-a-dropdown-button-to-twitter-bootstrap-typeahead-component">Adding a dropdown button to Twitter bootstrap typeahead component</a></p>
  
  <p>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)</p>
  
  <p>How would I accomplish this with Twitter Bootstrap Typeahead? </p>
  
  <p>Data Example:</p>
  
  <p>Colleges : </p>
  
  <ul>
  <li>UTEXAS</li>
  <li>UMIAMI</li>
  <li>USC</li>
  <li>STANFORD</li>
  </ul>
  
  <p>Departments: </p>
  
  <ul>
  <li>1,2,3 &lt;= STANFORD </li>
  <li>4,5,6 &lt;= USC </li>
  <li>7,8,9 &lt;= UMIAMI </li>
  <li>A,B,C &lt;= UTEXAS</li>
  </ul>
  
  <p>Courses:</p>
  
  <ul>
  <li>a &lt;= 1 </li>
  <li>b &lt;= 2 </li>
  <li>c &lt;= 3 </li>
  <li>d &lt;= 4 </li>
  <li>e &lt;= 5 </li>
  <li>f &lt;= 6 </li>
  <li>g &lt;= 7 </li>
  <li>h &lt;= 8 </li>
  <li>i &lt;= 9 </li>
  <li>j &lt;= A</li>
  <li>k &lt;= B</li>
  <li>l &lt;= C</li>
  </ul>
  
  <p>Warning: I'm a javascript/AJAX noob so please guide me well if javascript/AJAX is involved...</p>