Cara Membuat Inputan Autocomplete dari Database dengan JQuery dan PHP


Cara Membuat Inputan Autocomplete dari Database dengan JQuery dan PHP: sebelum kita membahas bagaiman cara membuat form autocomplete, sebaikanya kita harus tau dulu apa itu form autocomplete.
Jika kita ingin tau seperti apa itu autocomplete, nih lihat gambar dibawah…saya memberian contoh langsung dari form pencarian dari google.


Coba saja sobat perhatikan atau langsung peraktekan, ketika kita akan mencari sebuah artikel di google maka kita akan menuliskan sesuatu yang kita akan cari di form pencarian google, saat kata pertama di ketikan dan kita menekan space maka di bawah kolom akan terdapat beberapa sugest atau pilihan kata selanjutnya yang mungkin akan kita ketik… dengan autocomplete sebuah isian kolom menjadikan program bisa lebih interaktif dan mudah dalam pengisiannya..
Baca : Cara Membuat Blok Catatan tips, warning, dan Info di Blog
Nahh pada tutorial kali ini kita akan membuat sendiri nih,, bagaimana membuat form inputan autocomplete yang dimana datanya berasal dari database…
Petama kita harus membaut databasenya dulu yaa…tinggal copas aja tu di bawah,,database sudah saya siapkan kq..

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 13 Mar 2017 pada 05.49
-- Versi Server: 10.1.9-MariaDB
-- PHP Version: 5.6.15

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
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: `kasir-pk`
--

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

--
-- Struktur dari tabel `barang`
--

CREATE TABLE `barang` (
  `kode_barang` varchar(5) NOT NULL,
  `nama_barang` varchar(50) NOT NULL,
  `satuan` varchar(20) NOT NULL,
  `harga_jual` int(25) NOT NULL,
  `harga_beli` int(25) NOT NULL,
  `stok_awal` int(4) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `barang`
--

INSERT INTO `barang` (`kode_barang`, `nama_barang`, `satuan`, `harga_jual`, `harga_beli`, `stok_awal`) VALUES
('B001', 'Tepung Beras', 'BOX', 25000, 20000, 1000),
('B002', 'Gula', 'KG', 9000, 6000, 1000),
('B003', 'ale-ale', 'BOX', 12000, 10000, 1000),
('B004', 'Sampoerna', 'BOX', 20000, 19000, 1000),
('B005', 'mentega 1/2', 'KG', 5000, 4500, 1000),
('B006', 'Beras Jembrana', 'KG', 12000, 11000, 1000),
('B007', 'Tepung LM', 'KG', 12000, 13000, 1000);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `barang`
--
ALTER TABLE `barang`
  ADD PRIMARY KEY (`kode_barang`);

/*!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 */;

Setelah itu buat file index.php dan copas script dibawah..

<!DOCTYPE html>
<html>
 <head>
 <style>
 #caribarang{
 margin-top:100px;
 margin-left:600px;
 margin-bottom:200px;
 float:left;
 width:500px;
 height: 100px;
 border:1px solid #cccccc;
 background: #ffffff;
}

#caribarang table{
 width:500px;
 height: 100px;
 box-shadow:   5px 10px 5px #ccc;
 -webkit-box-shadow: 5px 10px 5px #ccc;
 -moz-box-shadow:  5px 10px 5px #ccc;
}

#caribarang table th{
 background:#2d309f;
 color:#ffffff;
}

#caribarang table td{
 padding-left:20px;
}

</style>
 <script type="text/javascript" src="js/jquery-1.4.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">
   $(function() {  
      $("#txtnamabarang").autocomplete("nama_barang.php", {
    width:300,
    max: 10,
    scroll:false,
 });
 
  $("#txtnamabarang").result(function(event, data, formatted) {
    $('#pilihan').html("<p>Barang yang anda pilih adalah: " + formatted + "</p>"); 
 });
    });
</script>
 </head>
 <body>
  <div id="caribarang">
  <table align="center">
  <tr>
  <th colspan="3">Masukan Pencarian</th>
  </tr>
  <tr>
   <td>Nama Barang</td>
   <td>:</td>
   <td align='center'>
   <input type='text' name='txtnamabarang' id='txtnamabarang' class='input_detail' style="width: 200px;">
   <div id="pilihan"></div>
   </td>
  </tr>
  </table>
  </div>
 </body>
 </html>

Dan terakhir buat file nama_barang.php dan copas juga script di bawah ini untuk mengambil data yang ada di databse..

<?php
mysql_connect("localhost","root","");
mysql_select_db("barang");

$q = $_GET["q"];
if (!$q) return;

$sql = mysql_query("SELECT * FROM barang WHERE kode_barang like '%$q%' OR nama_barang like '%$q%' ");
while($r=mysql_fetch_array($sql)){
 extract($r);
 echo"$nama_barang \n";
}
?>
Jika semua langkah di lakukan dengan benar, saya yakin semua akan berjalan..kode program tersebut bisa sobat modifikasi sesuai kebutuhan program yang sobat kerjakan juga.karna memang dengan autocomplete suatu inputan memang terihat lebih friendly…
ooyaaa saya ga pelit juga kq,,dibawah postingan tidak lupa juga saya memberikan link download untuk program yang sudah jadi…

Semoga tutorialnya berhasil dan bermamfaat yaa…
Download autocomplete
Baca : Perbedaan PHP4 dan PHP5 yang Lebih Mencolok

Reaksi:
Share this with short URL:

Artikel Terkait Lainnya:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser