• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

php

Script Autocomplete PHP MySQL Jquery

Last Updated on 24 September 2014 By tommy 11 Comments

Sebagai contoh untuk mempermudah pembelajaran ini, kita akan membuat script pencarian kata. Buat terlebih dahulu sebuah database dengan nama belajar dan tambahkan table autocomplete kalau mau import langsung bisa dilihat databasenya dibawah ini

--
-- Database: `belajar`
--
 
-- --------------------------------------------------------
 
--
-- Table structure for table `autocomplete`
--
 
CREATE TABLE IF NOT EXISTS `autocomplete` (
  `kata` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
--
-- Dumping data for table `autocomplete`
--
 
INSERT INTO `autocomplete` (`kata`) VALUES
('saya'),
('sayang'),
('kamu'),
('asal'),
('jangan'),
('ceria');

Untuk form pencarian, buat sebuah file bernama index.html, masukkan script dibawah ini

<html>
<head>
<title>jQuery Autocomplete PHP dan Mysql</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
	$("#kata").autocomplete("cari.php", {
		width: 140,
		matchContains: true,
		selectFirst: true
	});
});
</script>
</head>
<body>
<div id="content">
	<form>
		<p>
			Cari Kata :
			<input type="text" name="kata" id="kata">
		</p>
	</form>
</div>
</body>
</html>

Sekarang kita akan membuat script PHP sebagai back end form pencarian diatas, buat sebuah file bernama cari.php lalu isi script dibawah ini

<?php
$host="localhost"; // Host name
$username="jaranguda"; // Mysql username
$password="jarangudasimalem"; // Mysql password
$db_name="belajar"; // Database name
$con =  mysql_connect($host,$username,$password)   or die(mysql_error());
		mysql_select_db($db_name, $con)  or die(mysql_error());
$q = strtolower($_GET["q"]);
if (!$q) return;
$sql = "select * from autocomplete where kata LIKE '%$q%'";
$querysql = mysql_query($sql);
while($kt = mysql_fetch_array($querysql)) {
	$kata = $kt['kata'];
	echo "$kata\n";
}
?>

Hal yang perlu di perhatikan dari script diatas adalah host, username, password dan db_name sesuaikan dengan konfigurasi database anda. Hasil ketika dijalankan dari browser
autocomplete jquery in action

Kalau anda berminat menyesuaikan warnanya dengan thema yang anda buat, bisa dengan mengubah file jquery.autocomplete.css

File download di update 24 September 2014

Filed Under: PHP Tagged With: jquery, php

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Solusi AWS CLI SSL VALIDATION failed
  • Monitoring Kubernetes Cluster dengan Prometheus
  • Solusi Playwright Firefox version `GLIBCXX_3.4.30′ not found (required by /lib64/libicuuc.so.69)
  • Cara Upgrade Fedora 35 ke Fedora 36
  • Ekstrak Gzip File dan Ambil Total dengan Python

Komentar

  • Xpud on Script PHP untuk Mengambil History Lagu Shoutcast v2.5
  • Jrenx on Membuat Bot Telegram Sederhana dengan PHP
  • Sella on Kemana Menghilangnya Saldo BCA 50 ribu
  • Rian on Mengganti Halaman Error Laravel
  • Suchie on Kemana Menghilangnya Saldo BCA 50 ribu

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1m views
  • Password Terbaru ZTE F609 Indihome 781.5k views
  • Password Superadmin Huawei HG8245A 294.5k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 267.9k views
  • Cara Setting Wireless ZTE F609 Indihome 251k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 165.4k views
  • Akses UseeTV Indihome via Wireless ZTE F609 154.8k views
  • Cara Reset Password ZTE F609 Indihome 146k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 135.4k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 109k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java