Design Lunatic

Jquery Search

Usually, search forms are done with PHP. But why does this always have to be the case? Exactly, it doesn’t. Today, I will explain how to make a javascript search form.

HTML

As usual, we’re going to need some simple HTML markup.

<div id="search">
<input type="text" id="searchtext" placeholder="just type." autofocus>
</div>

<div id="text">

<div class="post">
<h2>Post 1</h2>
<p>
Lacus dictumst auctor sociis turpis ut mus aenean ultricies enim? Velit mus dapibus sed, placerat aliquam dolor ac sociis hac integer, placerat integer duis enim tincidunt sit scelerisque. A, augue sed lorem! Integer, ut diam ultrices, ut aenean sed tempor non urna, rhoncus vut cursus cras nunc, nec? Velit est? Odio? Arcu? Vut sit. Rhoncus nunc nunc, magnis non sagittis, non elementum a ut, amet integer, velit et, dignissim integer dignissim urna amet rhoncus in cras et ridiculus! Porta risus. Lorem proin tortor odio, urna et aenean ridiculus, proin sit? Nisi diam tincidunt mattis magna, rhoncus elementum dignissim etiam auctor nec pid, nisi dolor sed eu auctor tincidunt pid vel augue odio proin vel scelerisque, pulvinar a ultricies sit odio.
</p>
</div>

<div class="post">
<h2>Post 2</h2>
<p>
Montes ac! Pulvinar, aenean enim, rhoncus a! Ut nisi turpis tortor? Odio proin adipiscing urna et magna amet dapibus! Urna mus enim lacus, purus proin porttitor! Augue nec ultrices dis facilisis, placerat, ac. Sociis eros, nascetur scelerisque phasellus penatibus scelerisque ultricies lectus risus natoque, turpis augue penatibus. Elementum, odio facilisis adipiscing magna nec montes, auctor natoque eu cum duis! Purus vel, urna vel magna mus! Proin elementum sed sed penatibus ultrices vel vel porta ac habitasse ridiculus nec sit cursus phasellus mattis? Purus! Ultricies, dis aliquet porta sed sed pulvinar tincidunt sed, ac turpis. Et placerat dolor arcu in placerat vel porta integer lacus vut vel, lorem, vut turpis lacus, est arcu eros, auctor massa platea. Urna augue quis.
</p>
</div>

<div class="post">
<h2>Post 3</h2>
<p>
Magnis dis vel risus montes odio nunc porta aliquam vut ut, mid cras duis, ac, integer natoque dapibus mus! Habitasse mus rhoncus sed egestas nunc velit adipiscing vut sed, est facilisis amet, vel lectus facilisis, aenean tempor pid in purus mattis augue placerat arcu duis dolor purus. Ut penatibus, odio elementum hac etiam! Lacus pulvinar, odio, sagittis egestas massa ultricies mauris urna? Tortor, montes elementum elit risus. Ut mauris scelerisque nascetur! A quis hac, nunc montes augue urna, auctor, turpis massa odio arcu? Nisi mid ridiculus pellentesque nisi tincidunt, vut augue, a enim nunc lacus, pid dapibus ac egestas, vel pulvinar! Cras! Adipiscing lundium magna nascetur hac, aliquam augue dictumst mattis, sed augue dolor, platea eros dapibus. Phasellus lectus.
</p>
</div>

<div class="post">
<h2>Post 4</h2>
<p>
Ac. Nascetur proin? Eu eros? Porttitor dignissim dis hac elementum risus nunc ultricies non tincidunt vel ultrices turpis sagittis tincidunt aliquet ridiculus elementum nascetur quis ac diam ultricies sagittis, pulvinar! Enim quis in pellentesque nunc, mus augue augue, est magnis tincidunt, elementum porta rhoncus, est eu, urna, mid pid nunc elementum ultrices velit tortor ut, enim duis arcu, ultricies? Ac. Proin eros est quis ac nisi, urna integer augue tincidunt pellentesque? Natoque elementum platea nec tortor et parturient ultricies, ac egestas et pid. Auctor augue, elit nec, in mid porta, sociis amet tristique massa, magna. Scelerisque ridiculus pulvinar mattis turpis eu? Odio est platea, auctor rhoncus, velit platea egestas enim augue cursus! Odio ultrices, elementum? Eros quis dis magna.
</p>
</div>

<div class="post">
<h2>Post 5</h2>
<p>
Habitasse nascetur dignissim tristique non nec ut ridiculus et in porttitor, lacus sed lundium dis, elit turpis massa lectus, diam. Sit porta ultrices. Placerat, ac pulvinar pulvinar risus habitasse eu mid, porttitor mus in a, sed habitasse? Dignissim aliquet non nunc pid phasellus mus massa duis lundium integer et eros auctor habitasse aliquam, magna? Tristique, cras nisi natoque mid, rhoncus nec augue turpis parturient arcu nec sagittis, pulvinar sed. Enim dictumst, mid penatibus facilisis! Vel, augue pid. Lundium parturient, amet velit parturient elit dignissim placerat integer. Natoque, scelerisque adipiscing, dolor massa purus cras cum parturient, duis augue massa ac, ridiculus dapibus et aliquet aliquam, lacus pulvinar phasellus! Pellentesque! Dis phasellus magnis tempor, ac elit a? Scelerisque elementum dignissim nec.
</p>
</div>

<div class="post">
<h2>Post 6</h2>
<p>
Placerat dictumst. Porttitor sit. Nisi! Massa egestas dignissim parturient velit augue, dictumst dictumst, ac, in phasellus dignissim habitasse nunc ac? Aliquam phasellus vel. Duis non aenean mattis, pid tempor lacus proin mus est penatibus tincidunt velit. Natoque et proin nec natoque parturient, turpis! Adipiscing duis mauris rhoncus. Nunc amet sed, sit, amet porttitor! Eros amet! Facilisis, lorem, placerat dapibus! Vut amet, urna nec, sed augue etiam elementum magna lacus integer! Platea. Augue porttitor velit sociis vel lacus cum et aliquam elementum pulvinar mauris? Risus lorem habitasse ac? Aliquet dignissim? Auctor turpis. Nunc et auctor ut, ultrices placerat integer rhoncus aenean proin turpis. Augue. Amet, porta urna augue! Sed elementum tristique magna sit placerat? Lorem placerat phasellus a facilisis sed.
</p>
</div>
</div>

Just the usual Lorem Ipsum. However, each “post” has to contain different Lorem Ipsum, or else the search will be pointless.

CSS

As usual, some generic styling.

body {
background: url("bg.png");
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#text {
position: relative;
margin-top: 75px;
width: 500px;
margin: 0 auto;
}

.post h2 {
font-size: 26px;
margin-bottom: 6px;
margin-top: 12px;
}

.post p {
line-height: 24px;
font-size: 15px;
}

We’re also going to need to style the search form.

#search {
width: 500px;
margin: 0 auto;
}

#searchtext {
padding-left: 5px;
width: 495px;
height: 24px;
padding-top: 3px;
padding-bottom: 3px;
-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border: 1px solid #bbbbbb;
}

Of course, you’re also going to have to include a CSS reset.

Now, this next part is more important. We’re going to be using jquery’s addClass and removeClass functions, so we’re going to have to define these classes in our CSS.

.hidden {
overflow: hidden;
height: 0;
}

.visible {
visibility: visible;
}

The “hidden” class will make the posts that don’t match the query invisible, and the “visible” class will make the posts that do match the query visible. If that doesn’t make sense, don’t worry about it. We’ll go over the javascript right now.

Jquery

First, we’re going include a nice snippet of code from CSS-Tricks.

jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

This makes jquery’s “contains” function case insensitive. This makes the search 50,000 times more useful.

Next, we’ll create a “search” function. This function will be executed every time a key is pressed in the search field.

$(document).ready(function(){

		function search(){
			
			var searchValue = $('#searchtext').val();
		
			$('.post').addClass('hidden');
		
			$(".post:contains('" + searchValue + "')").addClass('visible').removeClass('hidden');
			
		}
	
	});

Now, let me explain. The variable “searchValue” contains the value of the search field. Next, we tell all the posts to be hidden. If you look back at our CSS, the “hidden” class makes the posts hidden. The last line is the most complicated in the whole script. Each post that contains the “searchValue” variable gets a class of “visible”, and stops having a class of “hidden”.

Lastly, we’re going to have to call the function every time a key is pressed.

$('#searchtext').keyup(function(){
	search();
});

All the code:

	
	jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
	
	
	$(document).ready(function(){
		function search(){
		
		var searchValue = $('#searchtext').val();
		
		$('.post').addClass('hidden');
		
		$(".post:contains('" + searchValue + "')").addClass('visible').removeClass('hidden');

		}

		
		$('#searchtext').keyup(function(){
			search();
		});

	});

Yes, that’s it. A simple jquery search that is lightweight and useful.