klo yang sering memang menggunakan mbah google pasti udah tau dengan
yang namanya autocomplite text hayo apa, kasih tau nya ya.... hehehehe
iya betul klo yg tau klo yang belum tau itu loh klo kita baru nulis a
tiba" udah banyak kata yang muncul di bawah textbox biasa gw bilang
textbox sok tau heheheh abisa baru nulis a aja udah pada muncul apalah
gitu nga jelas.. heheh
nah sekarang kita akan membuat yang seperti itu textbox so tau hehehehe salah deh autocomplite text, langsung aja ke TKP..
kita buat databasenya dulu an table ok untuk saat ini saya akan membuat autocomplite negara aja ya yang mudah.
create database test;
user test;
create table negara(id_negara int(5) auto_increment,nama_negara varchar(20), primary key(id_negara));
insert into negara(nama_negara) values ('Indonesia');
insert into negara(nama_negara) values ('Afganistan');
insert into negara(nama_negara) values ('America');
insert into negara(nama_negara) values ('Autralia');
insert into negara(nama_negara) values ('Argetina');
insert into negara(nama_negara) values ('Roma');
insert into negara(nama_negara) values ('Malaysia');
insert into negara(nama_negara) values ('Singapura');
insert into negara(nama_negara) values ('Mexico');
insert into negara(nama_negara) values ('Africa');
insert into negara(nama_negara) values ('India');
udah ya kiranya cukup dah.. banyak" juga buat apa emang kita belajar menghafal nama negara heheheh kan lagi belajar php ko jadi menghafal negara... berangkat lagi dah ke TKP selanjutnya...
buat script negara.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.autocomplite.css"/>
<script src="jquery-1.4.js"></script>
<script src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$('#negara').autocomplete("proses_negara.php",{
width: 150, // panjang tampilan data-data dibawah form input
max: 10, // menampilkan hanya 10 data
scroll: false // menghilangkan scroll
}) ;
$('#nagara').result(function(event, data, formatted){
$('#pilihan').html("<p>Anda memilih negara: "+formatted+ "</p>");
});
});
</script>
</head>
<body>
<p>Nama Negara : <input type="text" id="negara"/></p>
<div id="pilihan"></div>
</body>
</html>
untuk autocomplite bisa di download
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
selesai dah tinggal kita buat file satu lagi .. berangkat ke TKP
proses_negara.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
// plugin autocomplete selalu mengirimkan parameter dengan nama "q", dimaa isi dari "q" adalah form input
//pada file "negara.php"
$q = $_GET['q'];
if(!$q) return;
$sql = mysql_query("select nama_negara from negara where nama_negara like '%$q%'");
while($r=mysql_fetch_array($sql)){
$nama_negara = $r['nama_negara'];
echo $nama_negara"\n" ;
}
?>
selesai dah... silahkan mencoba mudah- mudahan bermanfaat ok jika ada yang belum paham komen aja,,, oh iya di atas kan ada memmanggil css karna kita belum belajar css jadi saya belum memasukan script css takut gan bingung step demi step aja ya.. php dulu aja next time ane bantu dah soal css hehehe.
tenang aja walau gan nga bikin file css diatas nga ngaruh tentang script yang lain jadi masih tetap bisa dijalankan dengan baik ko selamat mencoba ya gan .. SUKSES....
nah sekarang kita akan membuat yang seperti itu textbox so tau hehehehe salah deh autocomplite text, langsung aja ke TKP..
kita buat databasenya dulu an table ok untuk saat ini saya akan membuat autocomplite negara aja ya yang mudah.
create database test;
user test;
create table negara(id_negara int(5) auto_increment,nama_negara varchar(20), primary key(id_negara));
insert into negara(nama_negara) values ('Indonesia');
insert into negara(nama_negara) values ('Afganistan');
insert into negara(nama_negara) values ('America');
insert into negara(nama_negara) values ('Autralia');
insert into negara(nama_negara) values ('Argetina');
insert into negara(nama_negara) values ('Roma');
insert into negara(nama_negara) values ('Malaysia');
insert into negara(nama_negara) values ('Singapura');
insert into negara(nama_negara) values ('Mexico');
insert into negara(nama_negara) values ('Africa');
insert into negara(nama_negara) values ('India');
udah ya kiranya cukup dah.. banyak" juga buat apa emang kita belajar menghafal nama negara heheheh kan lagi belajar php ko jadi menghafal negara... berangkat lagi dah ke TKP selanjutnya...
buat script negara.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.autocomplite.css"/>
<script src="jquery-1.4.js"></script>
<script src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$('#negara').autocomplete("proses_negara.php",{
width: 150, // panjang tampilan data-data dibawah form input
max: 10, // menampilkan hanya 10 data
scroll: false // menghilangkan scroll
}) ;
$('#nagara').result(function(event, data, formatted){
$('#pilihan').html("<p>Anda memilih negara: "+formatted+ "</p>");
});
});
</script>
</head>
<body>
<p>Nama Negara : <input type="text" id="negara"/></p>
<div id="pilihan"></div>
</body>
</html>
untuk autocomplite bisa di download
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
selesai dah tinggal kita buat file satu lagi .. berangkat ke TKP
proses_negara.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
// plugin autocomplete selalu mengirimkan parameter dengan nama "q", dimaa isi dari "q" adalah form input
//pada file "negara.php"
$q = $_GET['q'];
if(!$q) return;
$sql = mysql_query("select nama_negara from negara where nama_negara like '%$q%'");
while($r=mysql_fetch_array($sql)){
$nama_negara = $r['nama_negara'];
echo $nama_negara"\n" ;
}
?>
selesai dah... silahkan mencoba mudah- mudahan bermanfaat ok jika ada yang belum paham komen aja,,, oh iya di atas kan ada memmanggil css karna kita belum belajar css jadi saya belum memasukan script css takut gan bingung step demi step aja ya.. php dulu aja next time ane bantu dah soal css hehehe.
tenang aja walau gan nga bikin file css diatas nga ngaruh tentang script yang lain jadi masih tetap bisa dijalankan dengan baik ko selamat mencoba ya gan .. SUKSES....
Tidak ada komentar:
Posting Komentar
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.