A simple working search bar for HTML websites.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2.6 KiB


A simple, working search bar for HTML websites.

How it works

By clicking on the arrow the search bar is extended. As soon as the user enters text, keyup starts the search() function, which uses filter to hide all <article> elements that do not contain the search query. All other articles remain.

Demo GIF

Clicking on the left arrow extends the search bar:

	$('#search').animate({ 'right': '0px' });
	$('#leftarrow').css({ 'display': 'none' });
	$('#rightarrow').css({ 'display': 'inline-block' });

Clicking on the right arrow collapses the search bar:

	$('#search').animate({ 'right': '-225px' });
	$('#leftarrow').css({ 'display': 'inline-block' });
	$('#rightarrow').css({ 'display': 'none' });

Typing into the search bar or clicking on the search button starts the search, so that the results are refreshed with each character. That's live search!



That's the actual search() function:

function search(){
	var searchquery = document.getElementById('searchfield').value.toLowerCase();
	$('article').css({ 'display': 'block' });
	$('article').filter(function () {
		return ($(this).find('*').text().toLowerCase().indexOf(searchquery) == -1)
	}).css({ 'display': 'none' });

Any article that does not have a child element containing the search query will be kicked out.

I want to search other elements

No problem, just change all occurrences of article in the script.js file to your element type or CSS class.

For example, if your element type is p then change all article occurrences to p, e.g.:

change to
$('article').css({ 'display': 'block' }); $('p').css({ 'display': 'block' });


You may freely use SimpleSearchBar's source code according to my Libre Licence. A link to my repo as the original source would be great 😎

jQuery: SimpleSearchBar uses jQuery.

Font Awesome: SimpleSearchBar uses Font Awesome icons. These may be used under the Attribution 4.0 International (CC BY 4.0) license.