mengubah value select box sesuai inputan text box dgn jquery

Soni Gunawan · Jun 9, 2013
masbro saya mau nanya sesuai tutorial anda yang dibawah ini
http://www.myphptutorials.com/tutorials/1073/autocomplete-memberi-sugesti-saat-user-input-data#_=_

disitu kan saat kita memilih kode barang di input text, maka akan autofill atau mengisi input text nama secara otomatis (sesuai kode brg di database)

kasus saya--> mengubah value select box sesuai inputan textbox

jadi kalau saya input kode brg,
saya puunya select form --> jenis brg(value: mouse, keyboard)

maka value select box tsb akan berubah sesuai dr kode brg yg dipilih

gmn ya caranya?saya pake tutorial masbro ga jalan.. hanya bisa ngubah value input text saja tidak untuk select form

ini full code saya

autocomplete.php
<html>
<head>
	<title>Test Script</title>
	<link rel="stylesheet" href="jquery-ui.css" />
	<script src="jquery-1.9.1.js"></script>
	<script src="jquery-ui.js"></script>
</head>
<body>

<form name="form-member" id="form-member" action="" method="post">
	<table>
    	<tr>
        	<td><label for="nim">Masukan NIM</label></td>
            <td>:</td>
            <td><input id="nim" name="nim" value=""/></td>
        </tr>
    	<tr>
        	<td><label for="nama">Nama</label></td>
            <td>:</td>
            <td><input id="nama" name="nama" value=""/></td>
        </tr>
    	<tr>
        	<td><label for="prodi">PRODI</label></td>
            <td>:</td>
            <td><input id="prodi" name="" value=""/></td>
        </tr>
		<tr>
        	<td><label for="prodi">Program Diploma</label></td>
            <td>:</td>
            <td>
			
			<select name="prodi" >
								<option value="" id="prodi">---Select Field---</option>
								<option value="ti">Teknik Informatika</option>
								<option value="si">Sistem Informasi</option>
			</select>
			
			</td>
        </tr>
		
    </table>
</form>
    
		<script type="text/javascript">
			$(function () {
				$("#nim").autocomplete({
					minLength: 1,
					matchContains: true,
					selectFirst: true,
					source: function (request, response) {
              			$.get("source.php", {term: request.term, data: $("#nim").val()}, 
							function (data) {
               	 				response(data);
            			},"JSON");
					},
					focus: function (event, ui) {
						$("#nim").val(ui.item.nim);
						return false;
					},
					select: function (event, ui) {
						$("#nim").val(ui.item.nim);
						$("#nama").val(ui.item.nama);
						$("#prodi").val(ui.item.prodi);		
					
						return false;
					}
				}).data("ui-autocomplete")._renderItem = function (ul, item) {
					return $("<li>").append("<a>" + item.nim + "</a>").appendTo(ul);
				};
			});
		</script>
	</body>
</html>

source.php
<?php require 'conn.php';

	//isi dengan script koneksi database
	$connection = mysql_connect($server,$user,$pass);
	$dbase = mysql_select_db($db);
	//Simpen koneksi database
    $kode = $_REQUEST['term'];
	
    $sql = "select nim,nama,prodi from mhs where nim like '$kode%'";
    $hs = mysql_query($sql);
    $json = array();
    while($rs = mysql_fetch_array($hs)){
		$json[] = array(
			'nim' => $rs['nim'],
			'nama' => $rs['nama'],
			'prodi' => $rs['prodi']
		
		);
    }
    header("Content-type: application/json");
    echo json_encode($json);
	
?>

mohon dibantu masbro..:)
Silahkan login untuk menjawab!
0
Ellyx Christian · Jun 20, 2013 · 0 Suka · 0 Tidak Suka
untuk mengatur nilai dari element form menggunakan jquery itu sama semua dengan fungs .val().
<html>
<head>
	<title>Test Script</title>
	<link rel="stylesheet" href="jquery-ui.css" />
	<script src="jquery-1.9.1.js"></script>
	<script src="jquery-ui.js"></script>
</head>
<body>
 
<form name="form-member" id="form-member" action="" method="post">
	<table>
    	<tr>
        	<td><label for="nim">Masukan NIM</label></td>
            <td>:</td>
            <td><input id="nim" name="nim" value=""/></td>
        </tr>
    	<tr>
        	<td><label for="nama">Nama</label></td>
            <td>:</td>
            <td><input id="nama" name="nama" value=""/></td>
        </tr>
		<tr>
        	<td><label for="prodi">Program Diploma</label></td>
            <td>:</td>
            <td>
 
			<select name="prodi" id="prodi">
								<option value="" id="prodi">---Select Field---</option>
								<option value="ti">Teknik Informatika</option>
								<option value="si">Sistem Informasi</option>
			</select>
 
			</td>
        </tr>
 
    </table>
</form>
 
		<script type="text/javascript">
			$(function () {
				$("#nim").autocomplete({
					minLength: 1,
					matchContains: true,
					selectFirst: true,
					source: function (request, response) {
              			$.get("source.php", {term: request.term, data: $("#nim").val()}, 
							function (data) {
               	 				response(data);
            			},"JSON");
					},
					focus: function (event, ui) {
						$("#nim").val(ui.item.nim);
						return false;
					},
					select: function (event, ui) {
						$("#nim").val(ui.item.nim);
						$("#nama").val(ui.item.nama);
						$("#prodi").val(ui.item.prodi);		
 
						return false;
					}
				}).data("ui-autocomplete")._renderItem = function (ul, item) {
					return $("<li>").append("<a>" + item.nim + "</a>").appendTo(ul);
				};
			});
		</script>
	</body>
</html>