PHP – Autocomplete Textbox menggunakan jQuery Ajax

autocomplete php

Selamat malam kali ini kami akan mencoba membahas bagaimana membuat autocomplete php menggunakan script ajax. Pada system sederhana ini terdapat textbox dimana ketika pengguna memasukkan beberapa kata kunci akan mengeluarkan hasil yang yang mirip atau bahkan sesuai dan di tampilkan secara dinamis tanpa merefresh halaman web.

Langsung saja mari kita masuk kedalam pembahasan inti.

1. Buat database dengan nama db_autocomplete kemudian masukkan struktur database dibawah ini.

-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Mar 14, 2019 at 03:04 PM
-- Server version: 10.1.37-MariaDB
-- PHP Version: 7.2.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_autocomplete`
--

-- --------------------------------------------------------

--
-- Table structure for table `country`
--

CREATE TABLE `country` (
  `country_id` int(11) NOT NULL,
  `countries` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`country_id`, `countries`) VALUES
(1, 'Afghanistan'),
(2, 'Albania'),
(3, 'Algeria'),
(4, 'Andorra'),
(5, 'Angola'),
(6, 'Argentina'),
(7, 'Armenia'),
(8, 'Australia'),
(9, 'Austria'),
(10, 'Bahrain'),
(11, 'Bangladesh'),
(12, 'Belgium'),
(13, 'Brazil');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `country`
--
ALTER TABLE `country`
  ADD PRIMARY KEY (`country_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `country`
--
ALTER TABLE `country`
  MODIFY `country_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

2. Buat file dengan nama conn.php file ini berfungsi sebagai koneksi database.

<?php
	$conn = mysqli_connect("localhost", "root", "", "auto_complate");
	
	if(!$conn){
		die("Error: Failed to connect to database");
	}
?>

3. Buat file dengan nama index.php file ini merupakan form dimana system akan di eksekusi.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style>
			#list {
				list-style:none;
				margin:0;
				padding:0;
				color:#000;
				border:1px solid #ccc;
				width:67%;
				margin-right:0px;
			}
			#list li {
				padding: 10px; 
				font-size:15px;
				background:#FAFAFA;
				border-bottom:1px solid #ccc;
			}
			#list li:hover {
				background:#eee;
				cursor:pointer;
				font-size:18px;
			}
		</style>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://jasawebsite.ooo">Jasawebsite</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">PHP - Simple Autocomplete Textbox Using jQuery</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-3"></div>
		<div class="col-md-6" style="height:300px;">
			<div class="form-inline">
				<label>Search Country:</label>
				<input type="text" id="searchbox" class="form-control" />
				<button type="button" id="search" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>
				<div id="country_list"></div>
			</div>
		</div>
	</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js"></script>
</body>	
</html>

4. Buat file dengan nama countries.php file ini mempunyai fungsi utama dalam system sederhana ini. Script ini akan mengisi textboxt ketika karakter dimasukkan.

<?php
	require_once 'conn.php';
	
	if(!empty($_POST['keyword'])){
		$query = mysqli_query($conn, "SELECT * FROM `country` WHERE `countries` LIKE '%".$_POST['keyword']."%' LIMIT 0, 5") or die(mysqli_error());
?>
		<ul id="list">
<?php		
		while($fetch = mysqli_fetch_array($query)){
?>
		<li onClick="displayCountry('<?php echo $fetch["countries"]; ?>');"><?php echo $fetch["countries"]; ?></li>
<?php
		}
?>
		</ul>
<?php		
	}
?>

5. Terakhir buat file dengan nama script.js.

$(document).ready(function(){
	$("#searchbox").keyup(function(){
		$.ajax({
		type: "POST",
		url: "countries.php",
		data:'keyword='+$(this).val(),
		success: function(data){
			$("#country_list").show();
			$("#country_list").html(data);
			$("#searchbox").css("background","#FFF");
		}
		});
	});
	
	$("#search").on('click', function(){
		var search = $("#searchbox").val();
		alert("You search: " + search);
		$("#searchbox").val('');
	})
});

function displayCountry(val) {
	$("#searchbox").val(val);
	$("#country_list").hide();
}

Kalian bisa mendownload filenya dan mempelajarinya secara langsung dengan menekan link button dibawah ini.

Sekian share semoga apa yang kami share bermanfaat bagi anda, silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

Your email address will not be published. Required fields are marked *