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 search box to customize for my site. There are many scripts available on net but couldn’t get one which are up to my expectations and my site requirements.
These are the things which 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 some how couldn’t get the right script, so as I love to work on some small snippets which makes a big difference in terms of site performance or look and feel (GUI and UI) etc. I just had some small concept 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 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 build Multi Search Box which looks similar to Firefox Quick Search.
I named it as “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 to 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.
And this gonna be a part of our WittySparks CSS Framework
Finally, don’t forget to spread it :)
This is fantastic! Two things: 1) the Bing icon doesn’t show up because in the code you call it as Bing.gif but in the included files and on your site it is bing.gif (lowercase). Change it to uppercase and it shows up. 2) What would it take to change the magnifying glass icon so that the search would be submitted if the user clicked it?
Hi, I am a Joomla user! How can I implement this widget into my joomla website. I am somewhat of a newbie so please explain it to me in detail! Thanks!!
How can i use it for two different sites, one uses method=”get” and one uses method=”post” ?
Yes.
function forIconSearch(action,img,method){
document.getElementById(‘multisearchFormIcon’).action = action;
document.getElementById(‘Iconselectedsearch’).src=img;
document.getElementById(‘multisearchFormIcon’).method = method;
}
and for each engine, add the method at the end:
forIconSearch(‘https://www.google.com/search?q=’,’google.png’,’post’);