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

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

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

Last Updated on 24 September 2014 by

Tulisan menarik lainnya

  • Mengimport File Excel Ke MySQL dengan Script PHP

    Kita akan menggunakan library PHP Excel Reader, untuk keperluan percobaan ini saya menyertakan script dan…

  • Membuat Script Login dengan PHP dan MySQL

    Update 13 Feb 2014 PHP + MySQLi bisa dilihat di Membuat Script Login Sederhana dengan…

  • Tutorial Koneksi PHP dengan MySQL

    Dibawah ini akan dijelaskan mengenai cara untuk mengkoneksikan PHP ke database MySQL. Tulis script dibawah…

  • Mengelola Database MySQL dengan Adminer

    Salah satu aplikasi ringan pengganti phpMyAdmin adalah Adminer. Tidak perlu instalasi, yang di perlukan hanya…

Filed Under: PHP Tagged With: jquery, php

Reader Interactions

Comments

  1. david says

    16 March 2020 at 12:27

    ada source file yg bisa di download ?

    Reply
  2. andi says

    7 February 2020 at 09:29

    file autocomplete.js mana ya saya minta

    Reply
  3. Gugun Dwi Permana says

    8 April 2015 at 09:36

    thank’s.. bermanfaat

    Reply
  4. ardian says

    23 September 2014 at 22:51

    parameter q pada sekrip ini di ambil dari mana ya om
    $q = strtolower($_GET[“q”]);

    Reply
    • tommy says

      24 September 2014 at 10:34

      didapat dari query autocomplete nya, kira-kira begini GET yang dikirim
      http://localhost/tutorial/autocomplete/index.php?q=say&limit=10&timestamp=1411529173803
      disitu kan keliatan q nya

      Reply
  5. ajonk says

    10 September 2013 at 19:59

    om itu get q dari mna tuch di file cari.phpnya kok ane cari2 g d ahbungannya …?

    Reply
  6. Hanster says

    8 June 2013 at 19:20

    Itu isi file index.html dan cari.php kebalik.

    Tp thx

    Reply
    • tommy says

      12 June 2013 at 08:15

      kebalik gimana? udah bener kok itu

      Reply
      • tommy says

        12 September 2013 at 09:41

        oh iya di file yang di download :P baru nyadar. thanks

        Reply
  7. ojan says

    16 April 2013 at 00:34

    pertamax

    simple banget langkah2nya :), makasih ya gan atas share ilmunya..

    Reply
    • tommy says

      17 April 2013 at 14:37

      yups, sama-sama bro :)

      Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Pencarian

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

Terbaru

  • Cara Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS
  • Cara Mengupdate Nama Apple silicon-as-a-Service Scaleway
  • Cara Force Delete Namespace di Kubernetes
  • Install PHP MariaDB di Mac Monterey

Komentar

  • mazda on Tutorial Lengkap Install Mail Server Postfix Dovecot MariaDB di CentOS 7
  • adi on Menggunakan Mikrotik Sebagai SSH Client
  • aris u on Solusi Simple Queue Mikrotik Tidak Berjalan
  • Bowo on Cara Mematikan SSID Molecool Balifiber
  • aris on Solusi Simple Queue Mikrotik Tidak Berjalan

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.1m views
  • Password Terbaru ZTE F609 Indihome 784.5k views
  • Password Superadmin Huawei HG8245A 318.1k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 273k views
  • Cara Setting Wireless ZTE F609 Indihome 257.1k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 169.8k views
  • Akses UseeTV Indihome via Wireless ZTE F609 156.8k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 153.1k views
  • Cara Reset Password ZTE F609 Indihome 147.5k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 113.5k views

Kategori

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

Sponsor

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