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.