Cara Membuat AutoComplete Dinamis Dengan Jquery & PHP

AutoComplete adalah salah satu fungsi jquery yang membuat pengisian data pada form menjadi lebih interaktif. AutoComplete berfungsi untuk memberikan sugesti pada user mengenai apa yang akan diisikannya dari data yang terdapat dalam database. Data tersebut biasanya didapat dari pengisian-pengisian sebelumnya.

Jadi, ketika user mengetikan kata “cara” misalnya, autocomplete akan memberikan beberapa opsi sugesti misalnya “cara membuat blog” dan “cara menulis tutorial”. Data sugesti tersebut sudah ada dalam database yang di dapat dari pengisian sebelumnya. Hal ini bisa anda lihat saat anda melakukan pencarian di google.

Selain pada form pencarian, autocomplete juga bisa digunakan pada isian-isian yang membutuhkan sugesti lainnya, misalnya untuk menentukan tag dan sebagainya.

DemoDownload

Pada demo, saya hanya menampilkan autocomplete untuk versi statis (tidak terhubung dengan database), sehingga apapun yang diisikannya, data sugestinya tetap sama. Hal ini karena tidak memungkinkan bagi saya untuk membuat database di hosting. Namun, pada file yang di download anda akan menemukan versi statis dan dinamisnya.

Agar lebih mengerti cara kerjanya, mari kita bedah bersama-sama. Baca dan pahami dengan seksama langkah-langkah di bawah. Yang akan di bahas, adalah autocomplete dinamis.

Konsep Dan Logika

Pada dasarnya, autocomplete hanyalah sebatas fungsi jquery statis seperti fungsi-fungsi lainnya. Namun, karena berhubungan dengan data yang digunakan untuk sugesti, fungsi ini akan menjadi cacat ketika data tersebut adalah data statis. Hal ini, karena yang diisikan oleh tiap user tentunya berbeda-beda sehingga data yang ditampilkan juga harus berbeda untuk tiap isian (data dinamis).

Data sugesti ini adalah data dari luar, artinya data tersebut terdapat pada file lain yang di panggil oleh fungsi autocomplete. Sebut saja, file ini bernama “data.php”. Pada file inilah terdapat script-script server-side yang berfungsi melakukan penyaringan data sugesti yang sesuai dengan yang diisikan user.

Ketika user mengisi sebuah isian dengan diawali denga kata “cara”, fungsi autocomplete secara otomatis “menyuruh” file data.php untuk melakukan pencarian dan penyaringan pada database, lalu hasilnya di hasilkan dalam bentuk seperti di bawah ini :

[“sugesti 1″,”sugesti 2″,”dst..”]

Format ini adalah format baku yang diinginkan si Autocomplete.

Persiapan

Download jquery library : sebelum memulai, silahkan download jquery library di sini, dan Jquery UI library-nya di sini. Gambar di bawah adalah pilihan yang sebaiknya anda centang saat mendowload file jquery UI.

Kedua javascript tersebut akan dibutuhkan dan dipanggil agar autocomplete berjalan.

Buat Database : Buatlah database baru di phpmyadmin dengan nama “db_autocomplete”. Setelah itu, klik database tersebut di sidebar kiri. Lalu klik menu “SQL” di atas, dan masukkan query di bawah ini pada textarea yang disediakan untuk query.

CREATE TABLE IF NOT EXISTS `autocomplete` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`judul` varchar(70) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;–
— Dumping data for table `autocomplete`
–INSERT INTO `autocomplete` (`id`, `judul`) VALUES
(1, ‘Cara membuat autocomplete jquery’),
(2, ‘Cara membuat multi level dropdown menu’),
(3, ‘Cara Membuat mega menu css’),
(4, ‘Cara membuat slider dengan css3’),
(5, ‘Cara membuat popup dengan css3’),
(6, ‘Cara membuat website dengan wordpress self hosted’),
(7, ‘Cara membuat tabel html lebih menarik’),
(8, ‘Cara membuat form berlangganan’),
(9, ‘Cara membuat form validationd dengan HTML5’),
(10, ‘Cara membuat Tab menu dengan css’);

Membuat File PHP

Untuk script php-nya, ada 2 file yaitu file connection.php dan data.php.

• connection.php
• data.php

<?php
mysql_connect(‘localhost’,’root’,”);
mysql_select_db(‘db_autocomplete’);
error_reporting(E_ALL ^ E_NOTICE);
?>

– Kode di atas adalah untuk menghubungkan database di server agar bisa diakses pada website yang di buat. Ini adalah kode paling dasar dalam pembuatan website dinamis dengan php.

HTML Dan Javascript

• HTML
• Jquery

<form method=”get” action=”” class=”ac-form”>
<div class=”form-group”>
<input type=”text” id=”search” name=”term” class=”search-input” placeholder=”Cari..”/><button class=”search-submit” type=”submit”>Go</button>
</div>
</form>

– tag input diberi id “search” yang akan dipakai pada jquery-nya.

Styling

Setelah sukses muncul, sekarang tinggal memasukkan kode-kode css agar autocompletenya lebih menarik. Sebelumnya, anda harus memanggil terlebih dahulu file jquery-ui.css. File ini adalah styling default untuk autocomplete yang dibuat. Panggil dengan menempatkan kode di bawah diantara tag <head> dan </head>

<link rel=”stylesheet” type=”text/css” href=”css/jquery-ui.css”/>

Setelah itu, barulah kita mulai untuk styling.Spider-Man: Homecoming movie trailer

Css Untuk Form

@media (min-width: 768px) {
.ac-form{
width:370px;
margin:100px auto;
}
}
.ac-form .search-input, .ac-form .search-submit {
padding:15px;
display: inline-block;
border:0;
font-size: 15px;
font-family: ‘cambria’, serif;
}
.ac-form .search-input:focus, .ac-form .search-submit:focus {
outline: none;
}
.ac-form .search-input {
width: 80%;
}
.ac-form .search-submit {
width: 20%;
background-color: #FF3337;
cursor: pointer;
color:#fff;
}

Css Untuk Daftar Sugesti

ul.ui-autocomplete {
width: auto;
border:none;
}
ul.ui-autocomplete li.ui-menu-item {
font-weight: 100 !important;
font-size: 17px;
padding:10px;
}
ul.ui-autocomplete li.ui-menu-item:hover {
background-color: #333;
color:#fff;
border:0;
font-weight: 100 !important;
}

Tempatkan kedua kode di atas pada file style.css atau diantara tag <style> dan </style>. Silahkan edit-edit sendiri.

Itu saja untuk tutorial kali ini. Ditunggu komentarnya :D. Semoga bermanfaat.