Home About Us Our Services Contact Us Completed Websites Website Design Web Application Development Search Engine Optimisation Job Vacancies
Nigeria Website Design Company, Website Designers, Web Application Deployment, Nigerian Websites

Livesearch: How To

Website Design & Development Articles || Previous Page

Written by Sayo Makinwa

Livesearch is a search technology, such that, as the user types the search keyword(s), an underground search is conducted, and suggestions are brought; suggestions related to the search keyword(s) typed by the user.

Technologies required

  • HTML
  • CSS
  • Javascript
  • php

The Codes

HTML:

<form action="search.php" method="post" name="search_form" id="search_form">
<div id="search">
<input name="searchWord" type="text" id="searchWord" onkeyup="showResult(this.value)" />
<input type="submit" name="Submit" value="Submit" />
<div id="livesearch"></div>
</div>
</form>

The HTML codes above creates a form and sends whtever is typed to a javascript function showResult as it is being typed

CSS:

#searchWord {
width:350px;
} div#livesearch {
width:351px;
position:absolute;
left:-9999px;
z-index:20;
}

The CSS codes above gives the textbox in which (a) search keyword(s) is typed and the div that will hold the result the same width, it also makes the div invisible.

Javascript:

The codes below are to be put in between <script> and </script> tags inside the head tag. It may alternatively be used as an external script.

function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
if (xmlhttp.responseText != "") { document.getElementById("livesearch").style.position="relative";
document.getElementById("livesearch").style.left="0";
}
}
}
xmlhttp.open("GET","includes/livesearch.php?str="+str,true);
xmlhttp.send();
}

php:

<?php
$word = $_GET ['str'];		// to get the search word
require_once ("connect.php");	 // getting your connection script
$field_name = "";				// put in your field name inside the empty quotes
$table_name = "";				// put in your table name inside the empty quotes
$query = "select $field_name from $table_name where $field_name like '%word%'";
$result = mysql_query($query);
whille ($row = mysql_fetch_assoc($result)) {
	echo "$row[$field_name] <br />";
	}
?> 

The php code above should be put in a file called livesearch.php

 

Our Services

Website Design
Web Application Development
Website Maintenace Services
Search Engine Optimisation
ICT Consultancy
ICT Outsourcing

Contact Us

Lagos Office: Towry Towers, 3rd Floor, Plot 1 Towry Close, Off Idejo St., Victoria Island

Ilorin Office: 12, Ilofa Road, GRA, Ilorin

Telephone: 234-(0)8020889646

Email:

 Copyright © 2004 - 2017 Plat Technologies Ltd, Victoria Island, Lagos & Ilorin, Kwara State Nigeria.® All rights reserved. Back to top