How to Create an Auto Complete Search using jQuery with PHP/MySQLi

Submitted by nurhodelta_17 on Sunday, April 8, 2018 - 22:55.

Getting Started

First, we need the jQuery library and Bootstrap for a better design to our app. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below: For Bootstrap For jQuery

Creating our Database

Next, we create the database that we are going to filter in this tutorial. I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database. You should be able to create a database named mydb.

Creating our Search Form

Next, we create our search form where we search for a keyword. Create a new file, name it as index.html and paste the codes below.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>How to Create an Auto Complete Search using jQuery with PHP/MySQLi</title>
	<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
	<style type="text/css">
		.mt20{
			margin-top:20px;
		}
		#autocomplete{
			display: none;
		}
		.list-group-item a{
			text-decoration: none !important;
		}
		.list-group li{
			cursor: pointer;
		}
		.list-group li:hover{
			color: white;
			background-color: #428bca;
		}
	</style>
</head>
<body>
<div class="container">
	<h1 class="text-center mt20">Auto Complete Search using jQuery</h1>
	<div class="row justify-content-center mt20">
		<div class="col-sm-6">
			<form id="autoForm" method="POST" action="">
				<div class="input-group input-group-lg">
				  	<input type="text" id="keyword" name="keyword" class="form-control" placeholder="Firstname, Lastname or Nickname" aria-describedby="basic-addon2">
				  	<div class="input-group-append">
				    	<button class="btn btn-outline-secondary" type="submit">Search</button>
				  	</div>
				</div>
			</form>
			<ul class="list-group" id="autocomplete"></ul>
		</div>
	</div>
</div>
 
<script src="jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Creating our jQuery Script

Next, we create our jQuery script where we put all our jquery functions and request. Create a new file, name it as app.js and paste the codes below.

$(document).ready(function(){
	//generate suggestion on keyup
	$('#keyword').keyup(function(e){
		e.preventDefault();
		var form = $('#autoForm').serialize();
		$.ajax({
			type: 'POST',
			url: 'search.php',
			data: form,
			dataType: 'json',
			success: function(response){
				if(response.error){
					$('#autocomplete').hide();
				}
				else{
					$('#autocomplete').show().html(response.data);
				}
			}
		});
	});
 
	//fill the input
	$(document).on('click', '.list-group-item', function(e){
		e.preventDefault();
		$('#autocomplete').hide();
		var fullname = $(this).data('fullname');
		$('#keyword').val(fullname);
	});
});

Creating our Search Script

Lastly, we create the script that searches our database from the inputted keyword. Create a new file, name it as search.php and paste the codes below.

<?php
	if(isset($_POST['keyword'])){
		//connection
		$conn = new mysqli('localhost', 'root', '', 'mydb');
 
		//initialize output
		$output = array('error' => false, 'data' => '');
 
		$keyword = $_POST['keyword'];
 
		//check if keyword is empty
		if(empty($keyword)){
			$output['error'] = true;
		}
		else{
			//getting data from database via keyword
			$sql = "SELECT * FROM members WHERE firstname LIKE '%$keyword%' OR lastname LIKE '%$keyword%' OR nickname LIKE '%$keyword%'";
			$query = $conn->query($sql);
 
			if($query->num_rows > 0){
				while($row = $query->fetch_assoc()){
					$output['data'] .= "
						<li class='list-group-item' data-fullname='".$row['firstname']." ".$row['lastname']."'>".$row['firstname']." ".$row['lastname']."</li>
					";
				}
			}
			else{
				$output['data'] = "
					<li class='list-group-item'>No data matches keyword</li>
				";
			}
		}
 
		echo json_encode($output);
	}
?>

That ends this tutorial. Happy Coding :)

Add new comment

519 views