Langsung ke konten utama

Cara Membuat AutoComplete TextField dengan JQuery


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.

Kali ini kita akan membuat autocomplete pada input text field dengan mengambil data yang terdapat dalam database.

PERSIAPAN :
Download jquery library : sebelum memulai, silahkan download jquery library dan Jquery UI library-nya.
Membuat database : Buatlah database baru di phpmyadmin dengan nama terserah anda, disini kita contohkan dengan nama "db_client".

MEMBUAT FILE PHP :
Pertama kita membuat file php untuk mengambil data dari database yang telah kita buat, simpan dengan nama "autocomplete.php".
<?php
    $connection = mysqli_connect("localhost","root","","db_client") or die("Error " . mysqli_error($connection));

    $sql = "select nama_user from t_user";
    $result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));

    $dname_list = array();
    while($row = mysqli_fetch_array($result))
    {
        $dname_list[] = $row['nama_user'];
    }
    echo json_encode($dname_list);
?>

Selanjutnya kita membuat file untuk menampilkan text field dan menjalankan fungsi autocomplete yang telah kita buat tadi, simpan dengan nama "index.php".

<html>
<head>
<!-- load jquery ui css-->
<link href="jQueryUI/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- load jquery library -->
<script src="jQuery/jQuery-2.1.4.min.js"></script>
<!-- load jquery ui js file -->
<script src="jQueryUI/jquery-ui.min.js"></script>

<script type="text/javascript">
$(function() {
    var availableTags = <?php include('autocomplete.php'); ?>;
    $("#name").autocomplete({
        source: availableTags,
        autoFocus:true
    });
});
</script>
</head>

<body>
<label>Name</label></br>
<input id="name" type="text" size="50" />
</body>
</html>

Terakhir kita uji coba untuk menjalankanya, jika berhasil nanti akan tampil seperti dibawah ini.

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

13 Fakta Kerusakan Peringatan Maulid Nabi

Dalam peringatan maulid yang diselenggarakan, sering terjadi kemungkaran, bid'ah dan pelanggaran terhadap syariat Islam. Peringatan maulid itu sendiri tidak pernah diselenggarakan oleh Rasulullah saw, juga tidak oleh para sahabat, tabi'in dan imam yang empat, serta orang-orang yang hidup di abad-abad kejayaan Islam. Lebih dari itu, tak ada dalil syar'i yang menyerukan penyelenggaraan maulid Nabi saw tersebut. Untuk lebih mengetahui hakikat maulid, marilah kita ikuti uraian berikut: 1. Kebanyakan orang yang menyelenggarakan peringatan maulid, terjerumus pada perbuatan syirik. Yakni ketika mereka menyenandungkan yang artinya, "Wahai Rasulullah, berilah kami pertolongan dan bantuan. Wahai Rasulullah, engkaulah sandaran (kami). Wahai Rasulullah, hilangkanlah derita kami. Tidaklah derita (itu) melihatmu, melainkan ia akan melarikan diri." Seandainya Rasulullah saw mendengar senandung tersebut, tentu beliau akan menghukuminya syirik besar. Sebab pemberi
Posting Komentar
Baca selengkapnya

Keunikan Gambar Stereogram

Stereogram ditemukan oleh by Charles Wheatstone pada tahun 1838. Ia menemukan penjelasan mengenai penglihatan binokular yang menuntunnya untuk membuat streoskop kombinasi dari prisma dan cermin yang memungkinkan seseorang uneuk melihat gambar 3 dimensi dari gambar 2 dimensi. Secara sederhana stereogram bisa diartikan sebagai gambar 2 dimensi yang menyimpan obyek 3 dimensi di dalamnya. Jika dilihat sekilas atau dengan cara biasa, stereogram hanyalah gambar 2 dimensi. Namun kalau dilhat dengan cara khusus, maka kita bisa melihat gambar atau obyek 3 dimensi di dalam gambar tersebut. Kesan tiga dimensi pada stereogram dapat dibedakan menjadi tiga macam, yaitu kesan ketinggian (ortoskopik), datar, dan kedalaman (pseudoskopik). Kunci untuk melihat kesan tiga dimensi pada stereogram adalah mata kiri fokus melihat obyek sebelah kiri dan mata kanan fokus melihat obyek sebelah kanan. Jenis-jenis Stereogram : 1.    Single Image Stereogram (SIS) atau Autostereogram, adala
1 komentar
Baca selengkapnya

Cara Dzikir Yang Benar Setelah Shalat

Di dalam hadits-hadits shahih disebutkan tentang Nabi saw setelah shalat, beliau membaca istigfar sebanyak 3 kali dengan lafadz,   3X اَسْتَغْفِرُ اللهَ Astaghfirullah. (3x) "Aku memohon ampun kepada Allah" Kemudian beliau membaca,  اَللَّهُمَّ أَنْتَ السَّلاَمُ وَمِنْكَ السَّلاَمُ وَإِلَيْكَ يَعُوْدُ السَّلاَمُ تَبَرَكْتَ رَبَّنَا وَتَعَا لَيْتَ يَاذَالْجَلاَلِ وَالْأِ كْرَامِ Allahumma antas-salam wa minkas-salam wa ilaika ya’udus-salam tabarakta rabbana wa ta’alaita ya dzal-jalali wal-ikram.   "Ya Allah, Engkau adalah Zat yang mempunyai kesejahteraan dan dari-Mu kesejahteraan itu kepada-Mu akan kembali lagi segala kesejahteraan itu.  Engkaulah yang berkuasa memberi berkah yang banyak dan Engkaulah Yang Maha Tinggi, wahai Zat yang memiliki keagungan dan kemuliaan." Kemudian beliau membaca,   اللَّهُمَّ لاَ مَانِعَ لِمَا أَعْطَيْتَ، وَلاَ مُعْطِيَ لِمَا مَنَعْتَ، لاَ يَنْفَعُ ذَا الْجَدِّ مِنْكَ الْجَدُّ Allahuma la mani'a l
Posting Komentar
Baca selengkapnya