Live Search Help

[SunnySideUp]

Hi,

I am trying to get a live search facility working but my code is not working, I was wondering if someone could help me out and see if there are any mistakes or things I can change:

Index.php

<form id="jobSearch" method="get" action="">
<input type="text" id="searchJobs" class="JobSearchBox" name="z" onkeyup="showResult(this.value)" size="60" maxlength="75" />
<input type="submit" name="submit" class="searchButton" id="clickSearch" value="LIVE JOB SEARCH" />
<p class="leftClear txt1 padding">Search by Job Title, Company or Location.</p>
</form>

My Script to carry out the search:

<?php

require (MySQL);

$z = mysqli_real_escape_string($dbc, $_GET["z"]);

if (strlen($q) > 0 ) {

	$hint = " ";
	
		if ($hint == " ") {

				$display = 25;
	
				if (isset($_GET['p']) && is_numeric($_GET['p'])) {
					$pages = $_GET['p'];
				} else {
					$q = "SELECT COUNT(JobAdvertID),JobAdvertID,CompanyID,JobTitle,JobType,SectorName,JobLocation,DATE_FORMAT(JobCreated, '%e %b %Y - %T %p') AS JobDate FROM JobAdvert,Sectors";
					$r = mysqli_query($dbc, $q);
	
					$row = mysqli_fetch_array($r, MYSQLI_NUM);
            		$records = $row[0];
		
            		if ($records > $display) {
						$pages = ceil($records/$display);
                	} else {
                    	$pages = 1;
                	}
	 			}

	 			if (isset($_GET['s']) && is_numeric($_GET['s'])) {
					$start = $_GET['s'];
	 			} else {
					$start = 0;
	 			}
	 
	 				$q = "SELECT JobAdvertID,CompanyID,JobTitle,JobType,SectorName,JobLocation,DATE_FORMAT(JobCreated, '%e %b %Y - %T %p') AS JobDate 
	 	   				  FROM JobAdvert,Sectors ORDER BY JobDate DESC LIMIT $start, $display";
	 				$r = mysqli_query($dbc, $q);
	 
	 				$num = mysqli_num_rows($r);
	 
	 				echo '<h1 class="normal padding">Job Search Results</h1>';
					echo '<span class="padding textHeight black">There were<span class="graw"> '.$num.' </span><span class="black">results found</span></span>.';
					echo '<br /><br />';
					echo '<div id="jobResults">';
	 				echo '<ul>';
					$bg = '#f0f0f0';
						while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)) {
							$bg = ($bg=='#f0f0f0' ? '#ffffff' : '#f0f0f0');
							echo '<li style="background-color:' . $bg . '" class="textHeight">
									<a href="http://<hidden>/jobProfiles/viewJob.php?jobID=' . $row['JobAdvertID'] . '" class="blue"><span class="capitals">' . $row['JobTitle'] . '</span><br />' . $row['SectorName'] . ' - ' . $row['JobType'] . ' - ' . $row['JobLocation'] . ' <span class="floatRight graw txt2" style="padding-right:12px;">' . $row['JobDate'] . '</span></a>
				  				  </li>';
						}
		
					echo '</ul>';	
					echo '</div>';
		
					if ($pages > 1) {
					echo '<br /><p class="padding textHeight">';
						$current_page = ($start/$display) + 1;
						if ($current_page != 1) {
							echo '<a href="http://<hidden>/index.php?s=' . ($start - $display) . '&p=' . $pages . '" class="blue padding">Previous</a> ';
						}
				
						for ($i = 1; $i <= $pages; $i++) {
							if ($i != $current_page) {
								echo '<a href="http://<hidden>/index.php/index.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '" class="blue padding">' . $i . '</a> ';
						} else {
							echo $i . ' ';
						}
					}
				
					if ($current_page != $pages) {
						echo '<a href="http://<hidden>/index.phpindex.php?s=' . ($start + $display) . '&p=' . $pages . '" class="blue padding">Next</a>';
					}
					echo '</p><br />';
				}	
			} else {
			
				 $display = 25;
	
				if (isset($_GET['p']) && is_numeric($_GET['p'])) {
					$pages = $_GET['p'];
				} else {
					$q = "SELECT COUNT(JobAdvertID),JobAdvertID,CompanyID,JobTitle,JobType,SectorName,JobLocation,DATE_FORMAT(JobCreated, '%e %b %Y - %T %p') AS JobDate FROM JobAdvert,Sectors";
					$r = mysqli_query($dbc, $q);
	
					$row = mysqli_fetch_array($r, MYSQLI_NUM);
            		$records = $row[0];
		
            		if ($records > $display) {
						$pages = ceil($records/$display);
                	} else {
                    	$pages = 1;
                	}
	 			}

	 			if (isset($_GET['s']) && is_numeric($_GET['s'])) {
					$start = $_GET['s'];
	 			} else {
					$start = 0;
	 			}
	 
	 				$q = "SELECT JobAdvertID,CompanyID,JobTitle,JobType,SectorName,JobLocation,DATE_FORMAT(JobCreated, '%e %b %Y - %T %p') AS JobDate 
	 	   				  FROM JobAdvert,Sectors ORDER BY JobDate DESC LIMIT $start, $display";
	 				$r = mysqli_query($dbc, $q);
	 
	 				$num = mysqli_num_rows($r);
	 
	 				echo '<h1 class="normal padding">Job Search Results</h1>';
					echo '<span class="padding textHeight black">There were<span class="graw"> '.$num.' </span><span class="black">results found</span></span>.';
					echo '<br /><br />';
					echo '<div id="jobResults">';
	 				echo '<ul>';
					$bg = '#f0f0f0';
						while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)) {
							$bg = ($bg=='#f0f0f0' ? '#ffffff' : '#f0f0f0');
							echo '<li style="background-color:' . $bg . '" class="textHeight">
									<a href="http://<hidden>/index.php/jobProfiles/viewJob.php?jobID=' . $row['JobAdvertID'] . '" class="blue"><span class="capitals">' . $row['JobTitle'] . '</span><br />' . $row['SectorName'] . ' - ' . $row['JobType'] . ' - ' . $row['JobLocation'] . ' <span class="floatRight graw txt2" style="padding-right:12px;">' . $row['JobDate'] . '</span></a>
				  				  </li>';
						}
		
					echo '</ul>';	
					echo '</div>';
		
					if ($pages > 1) {
					echo '<br /><p class="padding textHeight">';
						$current_page = ($start/$display) + 1;
						if ($current_page != 1) {
							echo '<a href="http://<hidden>/index.php/index.php?s=' . ($start - $display) . '&p=' . $pages . '" class="blue padding">Previous</a> ';
						}
				
						for ($i = 1; $i <= $pages; $i++) {
							if ($i != $current_page) {
								echo '<a href="http://<hidden>/index.php/index.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '" class="blue padding">' . $i . '</a> ';
						} else {
							echo $i . ' ';
						}
					}
				
					if ($current_page != $pages) {
						echo '<a href="http://<hidden>/index.php/index.php?s=' . ($start + $display) . '&p=' . $pages . '" class="blue padding">Next</a>';
					}
					echo '</p><br />';
				}	
			}
	} else {
	
			 $display = 25;
	
				if (isset($_GET['p']) && is_numeric($_GET['p'])) {
					$pages = $_GET['p'];
				} else {
					$q = "SELECT COUNT(JobAdvertID),JobAdvertID,CompanyID,JobTitle,JobType,SectorName,JobLocation,DATE_FORMAT(JobCreated, '%e %b %Y - %T %p') AS JobDate FROM JobAdvert,Sectors";
					$r = mysqli_query($dbc, $q);
	
					$row = mysqli_fetch_array($r, MYSQLI_NUM);
            		$records = $row[0];
		
            		if ($records > $display) {
						$pages = ceil($records/$display);
                	} else {
                    	$pages = 1;
                	}
	 			}

	 			if (isset($_GET['s']) && is_numeric($_GET['s'])) {
					$start = $_GET['s'];
	 			} else {
					$start = 0;
	 			}
	 
	 				$q = "SELECT JobAdvertID,CompanyID,JobTitle,JobType,SectorName,JobLocation,DATE_FORMAT(JobCreated, '%e %b %Y - %T %p') AS JobDate 
	 	   				  FROM JobAdvert,Sectors ORDER BY JobDate DESC LIMIT $start, $display";
	 				$r = mysqli_query($dbc, $q);
	 
	 				$num = mysqli_num_rows($r);
	 
	 				echo '<h1 class="normal padding">Job Search Results</h1>';
					echo '<span class="padding textHeight black">There were<span class="graw"> '.$num.' </span><span class="black">results found</span></span>.';
					echo '<br /><br />';
					echo '<div id="jobResults">';
	 				echo '<ul>';
					$bg = '#f0f0f0';
						while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)) {
							$bg = ($bg=='#f0f0f0' ? '#ffffff' : '#f0f0f0');
							echo '<li style="background-color:' . $bg . '" class="textHeight">
									<a href="http://<hidden>/index.php/jobProfiles/viewJob.php?jobID=' . $row['JobAdvertID'] . '" class="blue"><span class="capitals">' . $row['JobTitle'] . '</span><br />' . $row['SectorName'] . ' - ' . $row['JobType'] . ' - ' . $row['JobLocation'] . ' <span class="floatRight graw txt2" style="padding-right:12px;">' . $row['JobDate'] . '</span></a>
				  				  </li>';
						}
		
					echo '</ul>';	
					echo '</div>';
		
					if ($pages > 1) {
					echo '<br /><p class="padding textHeight">';
						$current_page = ($start/$display) + 1;
						if ($current_page != 1) {
							echo '<a href="http://<hidden>/index.php/index.php?s=' . ($start - $display) . '&p=' . $pages . '" class="blue padding">Previous</a> ';
						}
				
						for ($i = 1; $i <= $pages; $i++) {
							if ($i != $current_page) {
								echo '<a href="http://<hidden>/index.php/index.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '" class="blue padding">' . $i . '</a> ';
						} else {
							echo $i . ' ';
						}
					}
				
					if ($current_page != $pages) {
						echo '<a href="http://<hidden>/index.php?s=' . ($start + $display) . '&p=' . $pages . '" class="blue padding">Next</a>';
					}
					echo '</p><br />';
				}	
		}
?>

The AJAX script:

function showResult(str) {
	if (str.length == 0) {
		document.getElementById("liveResults").innerHTML = " ";
		document.getElementById("liveResults").style.border = "0px";
		return;
	}
	
	if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
	} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
		xmlhttp.onreadystatechange = function() {
			
			if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
				
				document.getElementById("liveResults").innerHTML = xmlhttp.responseText;
				document.getElementById("liveResults").style.border = "1px solid #A5ACB2";
			}
		}
		
		xmlhttp.open("GET", "../liveresults.php?z="+str,true);
		xmlhttp.send();
}

I have tried to take W3Schools live search facility and change it to meet my needs but is not working. Any help would be much appreciated.

[Graphix]

Using live search is a bit difficult to get working when it is your first AJAX related project, but anyway, here are some tips:

- First test whether the PHP page shows the correct HTML, by just visiting the PHP page in your browser and adding the GET variable manually:

liveresults.php?z=my+search+query

- Once that is working correctly, first make a simple function that alerts the variables you retrieve from the elements and call that first instead of directly start with the AJAX function (This step does not apply to you, as the variable is passed on by argument)

- Make the AJAX function and let it alert every step of the code, including whether the function is called at all, check the URL it is calling, what status and readystate it receives and what the responseText is

- When that is also working correctly, the problem should be solved ;) if not post below where it all went wrong

~G

[SunnySideUp]

Hi,

Thanks for your response, I did try the first point you mentioned and the PHP works fine.

I have also changed it slightly in the sense that I am now using JQuery and it works like a live search, but the probablem I encounter now is that When the pagination starts and I click to see the next set of results it doesn't work properly, I get the same results and also a non-styled page with no header.php and footer.php included?

$(document).ready(function(){
						   
	$(".JobSearchBox").keyup(function() {
									  
	    var searchJobs = $(this).val();
	    var dataString = 'jobSearch='+ searchJobs +'&jobSearch='+ searchJobs;
		
		if(searchJobs=='') {
			
		} else {
			$.ajax({
				type: "GET",
				url: "/searchJobs/liveresults.php",
				data: dataString,
				cache: false,
				success: function(html) {
					$("#liveResults").html(html).show();
				}
			});
		}
	return false; 
	});
});

My PHP script is exactly the same as above but I have changed the SQL's and varaible names. How would I pass in p (for pages) and s(for start of pages) or is there anther way I can get pagination to work ?

Thanks again.