cara yang bagus adalah menggunakan
jQueryui autocomplete. Pertama buat file json.php yang berguna untuk mencari data dan membuat json
<?php
//file json.php
$conn = mysql_connect("localhost","user","password");
mysql_select_db("dbname");
$sql = "select * from tbl_rute where id like '%".$_GET['term']."%'";
$rs = mysql_query($sql,$conn);
$data = array();
while($data = mysql_fetch_array($rs)){
$data[] = array(
'value' => $data['ID'],
'label' => $data['ID'],
'kd_try' => $data['Kd_Try'],
'rute' => $data['Rute']
);
}
header("Content-Type: application/json");
echo json_encode($data);
dan kemudian ubah kode kamu menjadi seperti:
<table width="600" border="0">
<tr>
<th width="101" align="right">ID Rute: </th>
<td colspan="2"><input type="text" name="id" id="id"></td>
<td width="60"> </td>
</tr>
<tr>
<td colspan="3">Kd Try: <input type="text" name="kd_try" id="kd_try" size="30" readonly></td>
</tr>
<tr>
<td colspan="3">Rute: <input type="text" name="rute" id="rute" readonly>
</td>
</tr>
</table>
<!-- menambahkan jquery dan jqueryui-->
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$("#id").autocomplete({
source:'json.php',
select:function( event, ui ){
$("#kd_try").val(ui.item.kd_try);
$("#rute").val(ui.item.rute);
$("#id").val(ui.item.value);
}
});
});
</script>