Tutorial PHP Pemula & Mahir

Question

AutoComplete langsung muncul data di 4 textfield

Kurosaki · Nov 17, 2011

Saya ada autocomplete...
File index.php

<script type="text/javascript" src="../../scripts/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#no_body').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>
<table>
  <tr>
    <td width="117">No. Body Bus</td>
    <td width="13">:</td>
    <td width="166"><input type="text" name="no_body" size="10" maxlength="10" id="no_body" onKeyUp="lookup(this.value);" onKeyDown="expVal(this.value)" onBlur="muncul(this)"/>&nbsp;
	<div class="suggestionsBox" id="suggestions" style="display: none;">
		<img src="../../images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
		<div class="suggestionList" id="autoSuggestionsList">
		&nbsp;
		</div>
	</div>
  </tr>
</table>
<div id="content2">
    <table width="364" border="0" align="center">
      <tr>
        <td width="133">Trayek</td>
        <td width="13">:</td>
        <td width="196"><input type="text" size="30" readonly="readonly" id="nm_try"/></td>
        </tr>
      <tr>
        <td>Jarak Rute</td>
        <td>:</td>
        <td><input type="text" size="5" readonly="readonly" id="jarak" style="text-align:right"/>&nbsp;km</td>
        </tr>
      <tr>
        <td>No. Bus</td>
        <td>:</td>
        <td><input type="text" name="no_bus" id="no_bus" size="6" readonly onBlur="javascript:cari2(this)" /></td>
        </tr>
      <tr>
        <td height="38">NOPOL</td>
        <td>:</td>
        <td><input type="text" size="10" readonly="readonly" id="nopol"/></td>
        </tr>
</table>
</div>

File rpc.php

<?php
	$db = new mysqli('localhost', 'root' ,'', 'bus');
	if(!$db) {
		echo 'ERROR: Could not connect to the database.';
	} else {
		if(isset($_POST['queryString'])) {
			$queryString = $db->real_escape_string($_POST['queryString']);
			if(strlen($queryString) >0) {
				$query = $db->query("SELECT tbl_nm_trayek.kd_try, tbl_nm_trayek.nm_try, tbl_id_bus.no_bus, tbl_id_bus.nopol
				FROM tbl_nm_trayek, tbl_id_bus WHERE tbl_id_bus.kd_try LIKE tbl_nm_trayek.kd_try AND tbl_nm_trayek.kd_try LIKE '$queryString%' LIMIT 10");
				if($query) {
					while ($result = $query ->fetch_object()) {
	         			echo '<li onClick="fill(\''.$result->kd_try.'-'.$result->no_bus.'\');">
						'.$result->kd_try.' | '.$result->nm_try.' | No. Bus: '.$result->no_bus.' | NK: '.$result->nopol.'</li>';
	         		}
				} else {
					echo 'ERROR: There was a problem with the query.';
				}
			} else {
			}
		} else {
			echo 'There should be no direct access to this script!';
		}
	}
?>

Jika kursor diarahkan ke textfield no_body, dan mencoba mengetikkan huruf A, maka akan muncul list dari no_body yg huruf depannya A. Kemudian jika diklik salah satu list, maka di textfield no_body akan muncul lengkap (misalnya: AAA1-1).
Pertanyaan: Gimana caranya agar tidak hanya di textfield no_body saja yg muncul data AAA1-1, tetapi di textfield yg lainnya juga muncul data yg lainnya?

if($query) {
					while ($result = $query ->fetch_object()) {
	         			echo '<li onClick="fill(\''.$result->kd_try.'-'.$result->no_bus.'\');">
						'.$result->kd_try.' | '.$result->nm_try.' | No. Bus: '.$result->no_bus.' | NK: '.$result->nopol.'</li>';
	         		}
				}

Munculnya disini:

</table>
<div id="content2">
    <table width="364" border="0" align="center">
      <tr>
        <td width="133">Trayek</td>
        <td width="13">:</td>
        <td width="196"><input type="text" size="30" readonly="readonly" id="nm_try"/></td>
        </tr>
      <tr>
        <td>Jarak Rute</td>
        <td>:</td>
        <td><input type="text" size="5" readonly="readonly" id="jarak" style="text-align:right"/>&nbsp;km</td>
        </tr>
      <tr>
        <td>No. Bus</td>
        <td>:</td>
        <td><input type="text" name="no_bus" id="no_bus" size="6" readonly onBlur="javascript:cari2(this)" /></td>
        </tr>
      <tr>
        <td height="38">NOPOL</td>
        <td>:</td>
        <td><input type="text" size="10" readonly="readonly" id="nopol"/></td>
        </tr>
</table>

mohon bantuannya kakak Ellyx...
makasi...

Silahkan login untuk menjawab!

Answer 1

0

Ellyx Christian · Nov 17, 2011 · 0 Suka · 0 Tidak Suka

http://jqueryui.com/demos/autocomplete/#custom-data

Answer 2

0

Kurosaki · Nov 17, 2011 · 0 Suka · 0 Tidak Suka

saya kurang paham kakak...

Answer 3

3

Ellyx Christian · Nov 24, 2011 · 3 Suka · 0 Tidak Suka

ubah file rpc.php menjadi:

<?php
	$db = new mysqli('localhost', 'root' ,'', 'bus');
	if(!$db) {
		echo 'ERROR: Could not connect to the database.';
	} else {
		if(isset($_GET['term'])) {
			$queryString = $db->real_escape_string($_GET['term']);
			if(strlen($queryString) >0) {
				$query = $db->query("SELECT tbl_nm_trayek.kd_try, tbl_nm_trayek.nm_try, tbl_id_bus.no_bus, tbl_id_bus.nopol
				FROM tbl_nm_trayek, tbl_id_bus WHERE tbl_id_bus.kd_try LIKE tbl_nm_trayek.kd_try AND tbl_nm_trayek.kd_try LIKE '$queryString%' LIMIT 10");
				$json = array();
				if($query) {
					while ($result = $query ->fetch_array()) {
					$result['label'] = $result['kd_try'];
					$result['value'] = $result['kd_try'];
					$json[] = $result; 
	         			}
				echo json_encode($json);
				} else {
					echo 'ERROR: There was a problem with the query.';
				}
			} else {
			}
		} else {
			echo 'There should be no direct access to this script!';
		}
	}
?>

ubah file index

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/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(){
$('#no_body').autocomplete({
source:"rpc.php",
select: function( event, ui ) {
	$( "#nm_try" ).val( ui.item.nm_try );
	$( "#jarak" ).val( ui.item.jarak ); //silahkan sesuaikan, saya tidak tahu field yang mana disini
	$( "#no_bus" ).val( ui.item.no_bus );
	$( "#nopol" ).val( ui.item.nopol );
}
});
});
</script>
<table>
  <tr>
    <td width="117">No. Body Bus</td>
    <td width="13">:</td>
    <td width="166"><input type="text" name="no_body" size="10" maxlength="10" id="no_body"/>
  </tr>
</table>
<div id="content2">
    <table width="364" border="0" align="center">
      <tr>
        <td width="133">Trayek</td>
        <td width="13">:</td>
        <td width="196"><input type="text" size="30" readonly="readonly" id="nm_try"/></td>
        </tr>
      <tr>
        <td>Jarak Rute</td>
        <td>:</td>
        <td><input type="text" size="5" readonly="readonly" id="jarak" style="text-align:right"/>&nbsp;km</td>
        </tr>
      <tr>
        <td>No. Bus</td>
        <td>:</td>
        <td><input type="text" name="no_bus" id="no_bus" size="6" readonly onBlur="javascript:cari2(this)" /></td>
        </tr>
      <tr>
        <td height="38">NOPOL</td>
        <td>:</td>
        <td><input type="text" size="10" readonly="readonly" id="nopol"/></td>
        </tr>
</table>
</div>