How would I achieve this? I want an autocomplete field that behaves differently

So what I am trying to achieve is as folowing:

I want people to be able to search and it will display results in an autocomplete way (right now I am using jquery ui autocomplete which works great for that). However I want everything to be done in the autocomplete drop开发者_运维百科 down view.

So for example, when an item is selected from the drop down it updates all the items (depending on which one is clicked). So say from the search the results were a bunch of countries clicking on Canada would then update the drop down with a list of provinces from Canada or something.

I can't figure out how to do this with jquery autocomplete. Is this bad practice. And how would I do this? Could I create my own autocomplete-like function?

Any help is appreciated. This is something that has been bugging me for awhile.

Jquery autocomplete provides a callback for select.

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

OR

$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

With either of the above approaches you can trigger a custom event or call another function or just do the work in the callback to handle setting the provinces.