CARA MEMBUAT PENCARIAN ALA GOOGLE

is-coding.blogspot.co.id/2016/07/cara-membuat-pencarian-ala-google.html

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
---------------------------------------------------------------------------------------------------------------------------------

$().ready(function() {
$("#negara").autocomplete("proses_negara.php", {
width: 150
});

$("#negara").result(function(event, data, formatted) {

$('#pilihan').html("

Anda memilih negara: " + formatted + "

");
});

});

1/5
Nama Negara :

---------------------------------------------------------------------------------------------------------------------------------
Skrip proses_negara.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;
}

2/5
.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;
3/5
 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 :

4/5
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.

5/5