A simple floating search button extending a 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.
pixelcode 0610fece46 Merge branch 'master' of https://codeberg.org/pixelcode/SimpleSearchButton 2 months ago
web-fonts-with-css first commit 2 months ago
LICENSE first commit 2 months ago
README.md updated README 2 months ago
SimpleSearchButton.gif new gif 2 months ago
icon.png icon 2 months ago
index.html first commit 2 months ago
jquery-3.4.0.min.js first commit 2 months ago
script.js first commit 2 months ago
style.css first commit 2 months ago



A simple floating search button extending a working search bar. For HTML websites.

How it works

By clicking on the floating button 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 floating button toggles the search bar:

	var searchfield = document.getElementById('searchfield').style.display;
	document.getElementById('searchfield').value = '';
	$('#searchfield').animate({ 'width': 'toggle' }, 300, 'swing');
	var html = $('#searchbutton').html();
		html == '<i class="fas fa-search"></i>' ? '<a style="font-size: 25px"><i class="fas fa-times"></i></a>' : '<i class="fas fa-search"></i>');

Typing into the search bar 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' });


SimpleSearchButton may be used under CC BY-NC-SA 4.0. That means: You can redistribute, edit and change the code for non-commercial purposes. It would be cool if you credit this repo as original 😎

jQuery: SimpleSearchButton uses jQuery.

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