How to make my search box actually work

JavaScript
1

Hi :slight_smile:

So I have made a search box on the frontend., with the help of an existing one, and then changing it a bit. With CSS, HTML and some Javascript. But how do I make it actually search for stuff?

How do I make it work when someone searches for “dogs” and then presses enter?

Can I do that with some helpful Javascript? Or do I need some type of backend-language to do that?

The code looks like this now:

HTML

  <form>

		<p class="expandSearch">
			<input type="text" placeholder="Search" />
			<a href="#">
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="375.045 607.885 30.959 30.33" enable-background="new 375.045 607.885 30.959 30.33" xml:space="preserve">
					<path fill="#494949" d="M405.047,633.805l-7.007-6.542c-0.129-0.121-0.267-0.226-0.408-0.319c1.277-1.939,2.025-4.258,2.025-6.753 c0-6.796-5.51-12.306-12.307-12.306s-12.306,5.51-12.306,12.306s5.509,12.306,12.306,12.306c2.565,0,4.945-0.786,6.916-2.128 c0.122,0.172,0.257,0.337,0.418,0.488l7.006,6.542c1.122,1.048,2.783,1.093,3.709,0.101 C406.327,636.507,406.169,634.853,405.047,633.805z M387.351,629.051c-4.893,0-8.86-3.967-8.86-8.86s3.967-8.86,8.86-8.86 s8.86,3.967,8.86,8.86S392.244,629.051,387.351,629.051z"/>
				</svg>
			</a>
		</p>

		<div class="clearfix"></div>

	</form>

CSS

*{
	margin: 0px;
	padding: 0px;
}

*, :active{
	outline: none!important;
}

body{
	font-family: arial, sans-serif;
	padding: 40px;
	font-size: 100%;
}

.clearfix{
	clear: both;
}

input{
	background-color: #ffffff;
	border: none;
	font-size: 16px;
	padding: 10px 0px 10px 0px;
}


.expandSearch,
.expandSearch input,
.expandSearch a{
	float: left;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	border-radius: 50px 50px 50px 50px;
	padding: 0px 0px 0px 0px;
}

.expandSearch a{
	border-radius: 50px;
	width: 20px;
}

.expandSearch{
	border: solid 1px #eeeeee;
}

.expandSearch input{
	height: 22px;
	overflow: hidden;
	width: 0px;
	opacity: 0;
}

.expandSearch a{
	display: block;
	padding: 12px 15px 8px 15px;
	background-color: #eeeeee;
}

.showSearch input{
	margin-left: 15px;
	margin-right: 5px;
	margin-top: 10px;
	width: 200px;
	opacity: 1;
}

.showSearch a{
	background-color: #b3d2f2;
}

.showSearch{
	border-color: #b3d2f2;
}

Javascript:

//Here begins search bar

;(function(){
	
	'use strict';

	var expandSearch = {
		init: function(){

			var _this = this,
			_searchContainers = document.querySelectorAll('.expandSearch');

			for( var _index in _searchContainers ){
				if( typeof _searchContainers[ _index ] === 'object' ){
					_this.searchFunctions( _searchContainers[ _index ] );
				}
			}

		},

		searchFunctions: function( _thisSearch ){
				
			var _nodes = _thisSearch.childNodes;

			//a click
			_nodes[3].addEventListener('click',function(e){

				if( _thisSearch.attributes.class.value.indexOf("showSearch") > -1 ){
					_thisSearch.attributes.class.value = 'expandSearch';
				}
				else{
					_thisSearch.attributes.class.value = 'expandSearch showSearch';
				}

				if( !e.preventDefault() ){ e.returnValue = false; }
			});

		}

	};


	//execute
	expandSearch.init();

}());

//Here ends the search bar
3

Hmm just so the viewer of that blog/website can search inside of that particular site. So for example if there is a post called “bread made better”, they can search for “bread” and get that post up in a page called “search results”.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.