title: How to Do MultiDimensional Autocomplete JQuery/Angular
body: <p>Right now I have an autocomplete directive with two types of inputs: a general and a more specific category (e.g. states vs cities, categories of business (retail) vs lines of business (retail banking) etc.)  I have a window that presents cartouches/buttons with all the added elements that are only of the latter, more specific kind (which can then be individually removed.  In other words, whenever a user enters a general category (e.g. "California"), what shows up would be "San Francisco, Los Angeles, Sacramento" which can each be individually removed.</p>
  
  <p>Something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/P5rdH.png" alt="complete field"></p>
  
  <p>OK, so what I would like is to make the autocomplete reflect this in the obvious way: to present a two-level tree, wherein if the cursor is on the higher branch, all the leaves are highlighted (to reflect that they will all be added), and where the leaves can be individually chosen.  </p>
  
  <p>In other words, something very vaguely like the Bootstrap multilevel select, but for autocomplete.</p>
  
  <p>I have read through the Jquery and Bootstrap docs (and obviously many SO posts), and can't find anything that specifically addresses this issue. Is there any plugin out there I am missing?  Or how would I go about hacking into the Jquery autocomplete to create this behavior?  Thanks!</p>