Membuat Autocomplete Searchform dari Database

Membuat autocomplete searchform dari database yang dimaksud di sini adalah membuat suggestion term sebagaimana yang ada pada pencarian Google. Misalnya, ketika memasukkan keyword pada searchform Google dengan kata Pepaya, maka akan muncul istilah terkait pepaya yang disajikan. Entah itu pepaya muda, pepaya Hongkong,  pepaya untuk diet, pepaya untuk ibu hamil dan lain sebagainya. Pembuatan autocomplete searchform ini menggunakan PHP dan Jquery.

Selanjutnya silahkan dicermati cara pembuatannya seperti di bawah ini:

Membuat file index.html

<html> 
<head>
    <title>Membuat Autocomplete Searchform dari Database</title>
    <script type="text/javascript" src="http://geodik.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://geodik.com/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">

        jQuery(document).ready(function(){
            $('#cari').autocomplete({source:'saran.php', minLength:1}); // saran.php di sini
        });

    </script>
    <link rel="stylesheet" href="http://geodik.com/smoothness/jquery-ui-1.8.2.custom.css" />
    <style type="text/css"><!--
   
            /* style the auto-complete response */
            li.ui-menu-item { font-size:12px !important; }
   
    --></style>
</head>

<body>

<form onSubmit="return false;"> //membuat form pencarian
    Isilah kata yang dicari
    <input id="cari" type="text" /> //membuat input form
</form>

</body>
</html>

Membuat saran.php

<?php

if ( !isset($_REQUEST['term']) )
    exit;

$dblink = mysql_connect('localhost', 'root', '') or die( mysql_error() );//membuat koneksi
mysql_select_db('siswa'); //memilih dtatabase

$rs = mysql_query('select istilah, definisi from prfx_data where istilah like "'. mysql_real_escape_string($_REQUEST['term']) .'%" order by istilah asc limit 0,10', $dblink);

$data = array();
if ( $rs && mysql_num_rows($rs) )
{
    while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
    {
        $data[] = array(
            'label' => $row['istilah'] , //isi dengan nama kolom yang dijadikan rujukan
            'value' => $row['istilah']
        );
    }
}

echo json_encode($data);
flush();
?>

Leave a Reply