CARA MEMBUAT PENCARIAN ALA GOOGLE

Hallo Pembaca,
Kali ini saya akan membahas bagaimana cara membuat pencarian data ala google. Pencarian seperti ini biasa dikenal dengan AutoComplete atau AutoSuggest. AutoSuggest adalah fitur tambahan dalam suatu form input untuk menampilkan data-data yang sesuai dengan apa yang anda ketiikan pada sebuah Form. Contohnya misalnya adalah form pencarian pada google, ketika kita menuliskan satu kalimat yang belum utuh, maka secara otomatis akan tersedia daftar data-data yang menyambungkan kalimat tersebut secara utuh, sehingga anda tidak perlu lagi menuliskan semua kata yang ingin anda cari. 
Oke deh, langsung saja kita praktekin cara buatnya,
1. Kita buat dulu databasenya, kali ini saya memberi contoh dalam pencarian sebuah negara
kali ini saya beri nama "dblatihan" kemudian buat tabelnya beri nama "negara" dan filed nya id_negara dan nama_negara, untuk struktur tabelnya seperti dibawah ini :
Silahkan anda isi tabelnya dengan nama negara, disesi akhir nanti akan saya beri skrip lengkapnya jadi anda tidak perlu lagi isi tabelnya, hehe..

2. Kita akan menggunakan plugin AutoComplete, sebenarnya kita bisa buat sendiri, namun skripnya akan terlalu panjang, jadi ya lebih efisien menggunakan plugin yang siap pakai, salah satunya anda bisa ambil di "http://bassitance.de/jquery-plugins/jquery-plugin-autocomplete". Masih ada plugin - plugin yang lain yang anda bisa manfaatkan membuat fungsi-fungsi lain

3. Silahkan anda buat dua buah skrip yaitu skrip negara.php dan proses_negara.php
skrip negara.php
---------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<link rel="stylesheet" href="main.css" type="text/css" />

<script type="text/javascript">
$().ready(function() {  
    $("#negara").autocomplete("proses_negara.php", {
        width: 150
  });

    $("#negara").result(function(event, data, formatted) {
                $('#pilihan').html("<p>Anda memilih negara: " + formatted + "</p>");
    });
   
});
</script>
</head>
<body>
  <div class="demo" style="width: 250px;">
  <div><p>Nama Negara : <input type="text" id="negara"></p></div>
  </div>
 
  <div id="pilihan"></div>
</body>
</html>
 ---------------------------------------------------------------------------------------------------------------------------------
Skrip proses_negara.php
---------------------------------------------------------------------------------------------------------------------------------
<?php
mysql_connect("localhost","root","");
mysql_select_db("dblatihan");

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

$sql = mysql_query("SELECT nama_negara FROM negara WHERE nama_negara LIKE '%$v%'");
while($data= mysql_fetch_array($sql)) {
    $nama_negara = $data['nama_negara'];
    echo "$nama_negara \n";
}
?>

4. Yang terakhir kita buat skrip untuk css nya atau interfacenya, berinama main.css silahkan anda perhatikan skrip dibawah ini :

body{
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color:#fff;
    color:#333;
    font-size:12px;
    padding-left:10px;
    padding-bottom:30px;
    line-height: 150%;
}

input, select, textarea{
    border:1px solid #CCCCCC;
    padding: 5px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:12px;
}

input.blur {
    color: #999;
}

.demo{
    border:solid 1px #ccc;
    background-color:#def;
    padding:10px;
    text-align: left;
}

form div {
    padding: 4px 4px 4px 4px;
}

label {
    float: left;
    width: 70px;
    text-align: left;
}

#bar{
background-color:#5fbbde;
width:0px;
height:16px;
}

#barbox{
float:right;
height:16px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}

.clear{
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}

#container{
    margin: 1em auto;
    width: 400px;
}
#container ul{
    list-style: none;
    list-style-position: outside;
}
#container ul.menu li{
    float: left;
    margin-right: 5px;
    margin-bottom: -1px;
}
#container ul.menu li{
    font-weight: 700;
    display: block;
    padding: 5px 10px 5px 10px;
    background: #fff;
    border: 1px solid #d0ccc9;
    border-width: 1px 1px 0 1px;
    position: relative;
    color: #5f95ef;
    cursor: pointer;
}

.content{
    margin: 0pt auto;
    background: #efefef;
    background: #fff;
    border: 1px solid #d0ccc9;
    text-align: left;
    padding-bottom: 20px;
    font-size: 10px;
}

.content ul{
    padding-left: 10px;
    padding-right: 10px;
}

.content h1{
    line-height: 1em;
    vertical-align: middle;
    height: 28px;
    padding: 10px 10px 10px 52px;
    font-size: 22px;
    background: transparent url(shout.png) no-repeat scroll left top;
}


#loading{
    text-align: center;
}
5. Sekarang coba kita jalankan skrip negara.php, kemudia pada textfield Nama Negara isikan dengan huruf "a", maka akan tampil data-data yang mengandung huruf atau kata-kata "a".
Hasilnya seperti gambar dibawah ini :

Sebenarnya masih banyak cara lain untuk membuat skrip autocomplete atau autosugest ala google, namun menurut saya ini yang paling mudah jadi saya membahas plugin autocomplete atau autosugest,  anda bisa mencobanya menggunakan skrip yang lengkap yang bisa diambil disini.








0 Response to "CARA MEMBUAT PENCARIAN ALA GOOGLE"

Post a Comment