There are a few times when we want our website visitors to search content in just one category and not the whole website. Today I am sharing a simple but effective UI trick to create a category based search box with CSS and jQuery.

Checkout this demo and then we’ll dig into the coding part.

Live Demo

HTML

Now let’s just add some styles to out HTML code above.

CSS

You can use the above CSS or create your own styles by changing the backgrounds, colours etc.

Now lets add the jQuery magic and make this piece of code look great

jQuery

Make sure you call the jQuery script on the page by adding this code on the page.

Like this code?
Create beautiful search boxes and include the links in the comments below.