• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Services
  • Newsletter
WittySparks / Technology / Programming / Build your own Firefox like Multi Search Box for your site

Build your own Firefox like Multi Search Box for your site

Updated: January 29, 2022 by Sravan K • 2 min read

Multi Search Form with custom Drop Down

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 :)

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
  • Latest Java Technologies & Trends for 2020

Topic: Programming

Profile picture for Sravan K Article by

Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a Web enthusiast, who keeps on eye on all the latest happenings on web from AI to Web3, etc.

View all posts by Sravan K

Primary Sidebar

Featured Productivity Software

Notion logo
Notion

Notion Workspace can help you stay organized and take your productivity to the next level. Use Skillshare coupon code WITTYSPARKSFREE to watch the Notion Masterclass by Ali Abdaal for FREE.

Take Free Notion Masterclass

The Best Digital Marketing Tool

Semrush logo
Semrush

Semrush helps grow your business on your terms and gets to the top with 55+ marketing tools in 1. Get a flat 40% discount on Guru plan or Try 14-day PRO Trial.

Try Semrush for FREE

Footer

Explore Topics

  • Technology
  • Business
  • Marketing
  • SEO
  • View All Topics

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Affiliate Link Disclosure

If you make a purchase from links, we will receive a small commission. See our Affiliate Disclosure.

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS
  • Mastodon

Copyright © 2023 WittySparks - All rights reserved.
Hosted on Rocket.net

  • About Us
  • Contact Us
  • Privacy Policy