Cara membuat autocomplete input PHP

10:46:00 PM

Assalamualaikum sobat,, pada kesempatan ini saya akan memberi sedikit tutorial,yaitu Cara membuat autocomplete input PHP, Autocomplete adalah fitur yang berfungsi memberikan sugesti prediksi data dari inputan oleh user sehingga mempermudah dan mempercepat proses input.
konsepnya adalah dengan cara mencocokan setiap karakter yang dimasukan oleh user dengan data yang telah ada atau disimpan di dalam database.

Untuk Menuliskan koding sobat bebas menggunakan Aplikasi apa saja,contoh :Notepad++, Dreamwaver, NetBeans, Eclipse.

Untuk mempraktekanya langkah pertama adalah,,

DATABASE,
Buat lah database,dengan nama "db_kelas" ,kemudian buatlah sebuah tabel dengan nama "tb_siswa" dengan struktur sebagai berikut.


kemudian inputkan bebearapa data dumy,ke dalam tabel, untuk sebagai contoh.


Kemudian selanjutnya buat lah file input.php ,untuk membuat Form Input autocomplete.
berikut kodingnya,,

<?php
$host="localhost";
$user="root";
$pass="";
$db="db_kelas";
$conect=mysql_connect($host,$user,$pass);
$dbconfig =mysql_select_db($db,$conect);
$query=mysql_query("select * from tb_siswa order by id_siswa asc");
$result = mysql_query("select * from tb_siswa");  
$jsArray = "var prdName = new Array();\n";
echo"
<tr>
<td>Select Id</td>
<td>:</td>
<td>
<select class='form-control' onchange='changeValue(this.value)'>  
<option>-------</option>";  
while ($row = mysql_fetch_array($result)) {  
echo '<option name="id_siswa"  value="' . $row['id_siswa'] . '">' . $row['id_siswa'] . '</option>';  
$jsArray .= "prdName['" . $row['id_siswa'] . "'] = {miez:'" . addslashes($row['nama_siswa'])."'};\n";  
}  
echo"
</select>
</tr>
<tr>
<td>Nama Siswa</td>
<td>:</td>
<td><input name='nm' id='nama_siswa' disabled='' class='form-control'></td>
</tr>
";
?>
<script type="text/javascript"> 
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('nama_siswa').value = prdName[id].miez;
};
</script>

jika,koding sobat, , benar dalam penulisanya,,maka kan tampil di web browse seperti berikut,,,



Nah itu lah tutorial sedikit untuk Cara membuat autocomplete input PHP ,semoga artikel ini bermanfaat untuk sobat semua,,,

dan untuk source code lengkapnya bisa di download di sini,sebelum mendowload, ,cobalah ringakan kan tangan sobat untuk share, tutorial ini,, dan terimakasih untuk sobat yang uda mampir,,,
Assalamualaikum...



Live Demo

Artikel Terkait

Previous
Next Post »