Hello this post is the one of the things i have stumbled upon today
I was working on a project and i was requested to do something ala Gmail shortcuts, aka you press a specific button and something happens, well, first off i looked on the web to see if there is any information, which of course it’s not at least from what i looked so i had to build it myself
First off we’ll start with a basic XHTML, containing an un-ordered list, styled a bit, the real secret is the JS itself, you can style the xhtml/css as you want, it doesnt really matter. To save space i’ll upload the complete final files at the end of this post, with instructions and comented css/xhtml/jquery
Okay what everything means is the
p.tip is basically a tip, how to use the system, not important in the JS.
div.helpBox is very important, because in JS, it will hold the letter the user typed, due to the JS used only 1 letter will be saved, the last one he typed.
div.container ul holds the
li elements that are the things we are interested in, and finally the
li tags hold the names we wish to search through.
Please note that after you understand how this works, you can change the xhtml/css structure to anything that suits you, this is just a demo, to show a concept.
Regarding the JS it is commented extensively within the file so please read that. It is possible to make it work for how many letters you want, however the code gets exponentially bigger as conditions have to be added, i will make a post about how to get 2-3 letters to work together very very easily after we build in more functionality in this post, like left/right navigation, what happens if you have different things u want sorted, and of course a top navigation that can switch between the various lists you have stored
Please note that this system can be used for a very extensive part, i posted about what you can do with a li tag in This Post so you could read that also
Attached is a full functional demo, with the js file commented at every step of the way, so for js instructions please refer there
In the next post i will show you how you can have left/right arrow keys functions, and in part 3 a top navigation bar, if you have multiple lists, and updated and enhanced left/right arrow key functionality to work with the new lists (this actually took me a while to figure out) AND in finally part 4 the ability to sort via 2 and 3 letters, each part being build on the code that is here ((this i havent done yet, so it will take some trial and error to do so this post may not come as soon as the other 2 parts