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.

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

Live Demo

HTML

<div class="search-box">
    <input type="text" value="" class="search-input" placeholder="search:" />
    <div class="search-filters">
      <label><input type="radio" name="filter" value="value" /> Category One</label>
      <label><input type="radio" name="filter" value="value" /> Category Two</label>
      <label><input type="radio" name="filter" value="value" /> Category Three</label>
      <label><input type="radio" name="filter" value="value" /> Category Four</label>
      <label><input type="radio" name="filter" value="value" /> Category Five</label>
      <label><input type="radio" name="filter" value="value" /> Category Six</label>
    </div>
</div>

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

CSS

#demo {
  width: 600px;
  margin: 100px auto 0 auto;
}
#demo .search-box {
  width: 100%;
  position: relative;
}
#demo .search-box input[type="text"] {
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 12pt;
  margin: 0px;
}
#demo .search-box input[type="text"]:focus {
  box-shadow: none !important;
  outline: none !important;
}
#demo .search-box .search-filters {
  display: none;
  width: 100%;
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-top: 0px;
}
#demo .search-box .search-filters:after {
  content: "";
  display: table;
}
#demo .search-box .search-filters label {
  margin-bottom: 7px;
  font-size: 13px;
  display: inline-block;
  width: 50%;
  float: left;
}

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

Now let’s 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.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.0.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-migrate-1.2.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>
jQuery(document).ready(function($){
  $('.search-box input[type="text"]').focus(function(){
    $('.search-filters').slideToggle();
  });
  $('.search-filters input[type="radio"]').on('click', function(){
    var placeholder_text = $(this).closest('label').text();
    $('.search-input').attr('placeholder', 'search: '+placeholder_text);
    $('.search-filters').slideToggle();
  });
});<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

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

Mohit Aneja
I am an experienced designer and developer with a solid knowledge & experience of current web and mobile technology. I am a problem solver at heart and strive to develop the most effective solutions at the highest of standards and current technology.

  • Stay up-to-date!
    Join our mailing list to receive product updates & announcements. Every month we give away FREE Licenses to our lucky subscribers.

    No Spam Ever!

Stay up-to-date!

Get notified of product updates, new products and freebies.