PHP to JavaScript array.

max_power · May 21, 2010

Hi all,

First sorry if this is in the wrong section. I am trying to create a search function that first performs the mysql query and then uses php to pass the values to a javascript array. So instead of numerous connections being made to the database, all the data gets stored in the javascript array at once and from there I can loop through the array to display values.

The second part of this is, using a search text box to loop through the array to find the relevant values but at the same when I am typing a letter or something, a div should provide a list of existing things, so basically an autosuggest list. After that, when the value is clicked on, it will be displayed as an alert.

I would greatly appreciate help in this as I really don't know that much of working with both javascript/ajax and PHP.

$query = "SELECT * FROM Customers";

max_power · May 22, 2010

Right guys, I have been working on it and this is where I have gotten so far:

<html>
<?php

// select database
mysql_select_db($dbName) or die ("Unable to select database!");
$rs=mysql_query("select customer_name from customers");
$records=mysql_num_rows($rs);
$i=1;
while(list($name)=mysql_fetch_row($rs))
{ if($i<$records) $array_names.="'$name',";
//if it's the last item from the series, don't put a comma after the value
else $array_names.="'$name'";
$i++;
}

?>
<head>
<script>
var customarray = new Array(<?php echo $array_names; ?>);	
</script> 

</head>

<body>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='names' value=''/> 
</body>
</html>

Now that I have managed to echo the names into a javascript array, how do I loop through the array using the textbox as well as build the autosuggest list?

Also, just one more thing, if I add in another customer and I don't referesh the search page, will it contain the new customer in the js array? If not, how do I do that?

Thanks

backie · May 22, 2010

Since you're talking about AJAX and claim not to know much about working with php or javascript. I would suggest you look into jQuery's AJAX functionality, real easy to get to grips with and the use of json_encode() php function. They make my life alot easier.

Quick examples

// With the jquery lib already included in the page.
		$(document).ready(function() {

			$("#frm_submit").click(function(){

$.get("/ajax.php", function(data){
					  
					  if (data.Code == 200){	
						  	alert(data.Message);
					  }
					  else
					  {
						  alert("It broke");
					  }
					  
					},"json");
			});
            });
});

<?php
$Array = array( "code" => 200, "message" => "Test", "array" => array(1,2,3,4) );
echo json_encode($Array);
?>

max_power · May 22, 2010

Thanks for the reply mate. I have been looking into ajax and have worked out something but the problem is the search box autosuggest list isn't populating from the javascript array.

Here are the codes:

Ajax.js file

/* ---------------------------- */
/* XMLHTTPRequest Enable 		*/
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
	request_type = new XMLHttpRequest();
}
	return request_type;
}

var http = createObject();

/* -------------------------- */
/* SEARCH					 */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'autosuggest.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
if(response!=""){
	e.innerHTML=response;
	e.style.display="block";
} else {
	e.style.display="none";
}
}
}

search.php file:

<?php 

include('config.php'); 




$SQL_FROM = 'tbl_user';
$SQL_WHERE = 'username';

?>
<?php
$searchq		=	strip_tags($_GET['q']);
$getRecord_sql	=	'SELECT username FROM '.$SQL_FROM.' WHERE '.$SQL_WHERE.' LIKE "'.$searchq.'%"';
$getRecord		=	mysql_query($getRecord_sql);
if(strlen($searchq)>0){

$records=mysql_num_rows($getRecord);
$i=1;
echo '<ul>';
while ($row = mysql_fetch_array($getRecord)) {

	if($i<$records) 
	{
		$array_names.="'$row',";
	}

	//if it's the last item from the series, don't put a comma after the value
	else 
	{
		$array_names.="'$row'";
	}
  $i++;


	?>
	<li><a href="#"><?php echo "

	<script>
		var customarray = new Array(".$array_names.");
		for (i=0;i<customarray.length;i++)
		{
			document.write(customarray[i] + <br >);
		} 
	</script>";


	 ?></a></li>
<?php } 
echo '</ul>';
?>
<?php } ?>

autosuggest.php file:

<!-- AJAX AUTOSUGGEST SCRIPT -->
<script type="text/javascript" src="lib/ajax.js"></script>

<style type="text/css">
/* ---------------------------- */
/* CUSTOMIZE AUTOSUGGEST STYLE	*/
#search-wrap input{width:400px; font-size:16px; color:#999999; padding:6px; border:solid 1px #999999;}
#results{width:260px; border:solid 1px #DEDEDE; display:none;}
#results ul, #results li{padding:0; margin:0; border:0; list-style:none;}
#results li {border-top:solid 1px #DEDEDE;}
#results li a{display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;}
#results li a small{display:block; text-decoration:none; color:#999999; font-weight:normal;}
#results li a:hover{background:#FFFFCC;}
#results ul {padding:6px;}
</style>
<div id="search-wrap">
<h1>Search with Auto Suggest</h1>
<input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>
<div id="results"></div>
</div>

What's going wrong, why isn't the javascript array spitting out the values?

Sign In

PHP to JavaScript array.

Recommended Posts

max_power

Link to comment

Share on other sites

max_power

Link to comment

Share on other sites

backie

Link to comment

Share on other sites

max_power

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information