As you all might have already observed our site WittySparks is growing with many quality services like BLOGs, NEWs, ViDEOs, TOPiCs, QUOTEs, GAMEs, and more to come soon. So thought to have a simple and user-friendly Global Search Form to search all my services provided with customized service-based drop-down options.
As usual, as everyone does – I started searching in Google for some cool, simple, and easy-to-use search form with multiple types of the search box to customize for my site. There are many scripts available on the net but couldn’t get one that is up to my expectations and my site requirements.
These are the things that are in my mind while searching for Multi-Search Form with Drop Down Options:
1. Should not be more complicated and should be easy to use
2. Should not have more JavaScript or CSS or HTML Code
3. Should be simple to tweak according to our site requirements
4. Among all, it should look Simple and Clean – yeh GUI and UI matters :)
But somehow couldn’t get the right script, so I love to work on some small snippets which make a big difference in terms of site performance or look and feel (GUI and UI) etc. I just had some small concepts in my mind on how we can easily build Multi-Search Form with custom Drop Down form Options with simple CSS, JavaScript, and HTML coding.
As you are all aware of my recent post – “Build Multi-level Multi-column Multi Menus with pure CSS” which is a simple menu without any JavaScript and works well with all the major browsers including Internet Explorer 6. I just took the above menu concept to build the Custom Drop Down menu for my new Multi-Search Box and with a little bit of JavaScript, I have to build Multi-Search Box which looks similar to Firefox Quick Search.
I named it “Multi-Search with custom Drop Down“.
and yeh works well with all the new and major browsers like Internet Explorer, Mozilla Firefox, Opera, Apple Safari and Google Chrome and one more great thing is it works well with Internet Explorer 6 too, as you all aware still we have many IE 6 users, it made me work for old browser too.
Check the Demo, Download and Explore yourself :) – feel free to enhance the same and let me know if you find any bugs.
demo download
And this gonna be a part of our WittySparks CSS Framework
Finally, don’t forget to spread it :)
Article by