I would appreciate advice on how to use autocomplete with "suggest" to meet the following user requirements:
- key in enough data to cause the desired selection to be suggested in the autocomplete text box and hit enter to navigate to the selection
- key in enough data to cause the desired selection to be suggested in the autocomplete text box and click a search buton to navigate to the selection
- key in some data and pick one of the autocomplete selections from the list to navigate to the selection
- key in data that does not autocomplete and hit enter causing a "not found" dialog to be displayed
- key in data causing the drop down to display but then click somewhere else on the screen without any navigation happening
I have been working on this a while and am probably missing something simple. I feel my implementation is too complicated and there should be a simpler way to achieve the requirements above. My example below meets all of the requirements except the last one. I can't find a way to solve the last one and still meet the other requirements. In the example below, I pop an alert instead of navigating for demo purposes. Because of this in a few of the cases it appears to navigate twice but in reality it would only navigate once.
My example is in a jsbin at:
http://jsbin.com/oToy/1/edit?html,output
My example is in a jsbin at:
http://jsbin.com/oToy/1/edit?html,output