My unconventional use of Fancy Typeahead

Last week, I implemented using Fancy Typeahead to replace a combobox I was using to lookup Vendor information.   It works way better and was well received by the users!   No more @DbColumn, no more explaining that I can't have more that 1500 vendors or the application will break.   No designer in this decade puts 800 values in a dropdown.

This post is not intended to go over the details of how Fancy Typeahead works.   It is best explained by its creator, Tim Tripcony on his blog, or by David Leedy in this Notes in 9 episode.

Let me explain my unconventional use of fancy typeahead by first saying the other night at 3AM my two year old son came blazing in our room and woke me up so that I couldn't get back to sleep.   During this time it occurred to me that I could use the same functionality to give the users a way to check the status of an invoice document.  Nevermind that they don't need to do anything with the information that is returned.

Here is how it works:
1) This is how it looks when section is expanded.  Notice the HTML5 placeholder text.

 

2)  When you start typing an invoice number, the type ahead starts working.

3)  When the user finds the invoice they are looking for.  They can read the typeahead info and find all the info that they will need.   This will be the most useful part!

4) The user can if they choose click on the typeahead value, and it will return the first line to the input box.  I have to return something to get it to work.  At any point, if the user has seen all they need, then can push the black X to clear the field and start typing the next invoice to look up.

The hardest part of implementing this, was getting the HTML correct in the typeahead text.  I used a table with two columns, the first with a rowspan=2.  I used simple if statements, to set different text and images depending on the approval status. The rest was a lot of trial and error until I liked the way it looked.  Also, I had to bind the textbox to something, so I bound it to a viewScope variable appropriately named 'saveNever'.