Geek Answers Handbook

PHP, AJAX Autocomplete input fields from HTML select?

I tried for some time to figure out the correct method for extracting information from a database based on the source text selected in the html drop-down menu.

Here is my code:

<html> <head> </head> <script src="testjs.js"></script> <?php $host = ""; $username = ""; $password = ""; $database = ""; mysql_connect($host, $username, $password); mysql_select_db($database); ?> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <?php $Query = mysql_query("SELECT * FROM population"); while ($Rows = mysql_fetch_array($Query)) { $ID = $Rows['ID']; $Pop = $Rows['Pop']; $UniqueID = $Rows['uid']; echo "<option value=\"$UniqueID\">$Pop</option>"; } ?> </select> </form> <br> <p>DB ID <input type="text" id="ids" name="ID" ></p> <p>Population <input type="text" id="content" name="contet" ></p> <p>Unique ID <input type="text" id="uid" name="uid" ></p> <div id="GetInformation"><b>Person info will be listed here.</b></div> </body> </html>

test.js contains:

 function showUser(str) { if (str=="") { document.getElementById("GetInformation").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("GetInformation").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); }

Get user contains:

 <?php $q=$_GET["q"]; $con = mysql_connect('', '', ''); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("DropDown", $con); $sql="SELECT * FROM population WHERE uid = '".$q."'"; $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { $ID = $row['ID']; $Pop = $row['Pop']; $UID = $row['uid']; ?> <script type="text/javascript"> var ids = '<?php echo json_encode($ID); ?>'; var content = '<?php echo json_encode($Pop); ?>'; var uid = '<?php echo json_encode($UID); ?>'; </script> <?php } mysql_close($con); ?>
+4
source share
1 answer

try changing

 while($row = mysql_fetch_array($result)) { $ID = $row['ID']; $Pop = $row['Pop']; $UID = $row['uid']; ?> <script type="text/javascript"> var ids = '<?php echo json_encode($ID); ?>'; var content = '<?php echo json_encode($Pop); ?>'; var uid = '<?php echo json_encode($UID); ?>'; </script> <?php }

to

 while($row = mysql_fetch_array($result)) { $ID = $row['ID']; $Pop = $row['Pop']; $UID = $row['uid']; echo $ID . ' - ' . $Pop . ' - ' . $UID; }

this should work. but there are more effective ways as they give you more access later on your client side. for example send the JSON object back, quick example:

 $info = array(); while($row = mysql_fetch_array($result)) { $ID = $row['ID']; $Pop = $row['Pop']; $UID = $row['uid']; $info[] = array( 'id' => $ID, 'pop' => $Pop, 'uid' => $UID ); } echo json_encode($info);

and your JS will be something like:

 if (xmlhttp.readyState==4 && xmlhttp.status==200) { var data = JSON.parse(xmlhttp.responseText); for(var i=0;i<data.length;i++) { document.getElementById("GetInformation").innerHTML += data[i].id + ' - ' + data[i].pop + ' - ' + data[i].uid; } }

NOTE: if you are working with a browser that does not include the JSON library, you need to download http://www.json.org/js.html . Also, AJAX / DOM changes can be made much easier if you want to use jQuery

+1
source

More articles:


All Articles