Passing a PHP Array Variable into Javascript

kronck

Ok, i have a few javascript functions that are used for doing an "Autocomplete" function inside a input text box.

The Javascript Functions use a Javascript Array Variable to pull the info that is verified / autocompleted by the user input.

It works great. I would like to use these same functions to do an autocomplete for a list of names in a MySQL DB.

I have created the PHP Array with sucucess. I'm now needing Javascript to use this PHP Array in place of the Javascript array.

I believe this is possible, but after a few days of trying to find a solution, i am at a loss. The code for the Javascript functions are below and should work for any wishing to test this out. At the bottom of the code, is the javascript array that i am needing to "swap" with the PHP array. The PHP array is "$arrValues". Im sure there is a rather simple solution to this, but im at a loss. Im not much of a javascript guru.

Thanks in advance for any help.

<html>
<head>
<title>Autocomplete Textbox Example</title>
<script type="text/javascript">
var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

function textboxSelect (oTextbox, iStart, iEnd) {

switch(arguments.length) {
case 1:
oTextbox.select();
break;

   case 2:
       iEnd = oTextbox.value.length;
       /* falls through */

   case 3:          
       if (isIE) {
           var oRange = oTextbox.createTextRange();
           oRange.moveStart("character", iStart);
           oRange.moveEnd("character", -oTextbox.value.length + iEnd);      
           oRange.select();                                              
       } else if (isMoz){
           oTextbox.setSelectionRange(iStart, iEnd);
       }

}

oTextbox.focus();
}

function textboxReplaceSelect (oTextbox, sText) {

if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();

} else if (isMoz) {
var iStart = oTextbox.selectionStart;
oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
}

oTextbox.focus();
}

function autocompleteMatch (sText, arrValues) {

for (var i=0; i < arrValues.length; i++) {
if (arrValues.indexOf(sText) == 0) {
return arrValues;
}
}

return null;

}

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {
case 38: //up arrow

case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up

case 34: //page down

case 36: //home

case 35: //end

case 13: //enter

case 9: //tab

case 27: //esc

case 16: //shift

case 17: //ctrl

case 18: //alt

case 20: //caps lock
case 8: //backspace

case 46: //delete
return true;
break;

   default:
       textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));
       var iLen = oTextbox.value.length;

       var sMatch = autocompleteMatch(oTextbox.value, arrValues);

       if (sMatch != null) {
           oTextbox.value = sMatch;
           textboxSelect(oTextbox, iLen, oTextbox.value.length);
       }  

       return false;

}
}

   </script>

AND NOW FOR THE ARRAY.............

craigh

forgive me for not reading the entire post, but here is some code I used to print a php array into javascript:

	<?php print ("var js_sections = new Array('',");
	$ctr=0;
	while (list($k,$v_ar)=each($sects_dup)) {
		if ($ctr>0) print (",");
		print ($k);
		$ctr++;
	}
	print (");\n");
	reset($sects_dup); ?>

if i were to write it now, I would probably use a foreach loop instead of the list...each loop.

kronck

Using the method of print ("..... causes the array to be echo'd to the page. wich is great for testing. in the original javascript functions the "var arrValues" is created in a seperate "<script>" when adding this in using the print method, then the array does not echo to the page. I could care less at this point if it echos or not, but in either case it is assigning numerical values to the javascript array as opposed to the names from the database as it does with the php Array. neither the names or the numerical values seem to function in the autocomplete input feild. here is the added code.

<?
//print ("<script>\n");
print ("var arrValues = new Array('',");
$ctr=0;
while (list($k,$v_ar)=each($phpArray)) {
if ($ctr>0) print (",");
print ($k);
$ctr++;
}
print (");\n");
//print ("</script>\n");
reset($phpArray);
?>

craigh

glad I could help? :/

kronck

Have it figured out. Thx for the help craigh.

kronck

heh, sorry for the lack of response. here was the final code that worked great. I spent a good deal of time working on a autocomplete field used in conjunction with Mysql, and PHP. The insite is what i was thinking you for. 🙂

first just the final passing code from PHP to javascript.....

print ("<script>\n");
print ("var arrValues = [''");
for ($j=0; $j<$num_results; $j++)
{
$CustomerID = mysql_result($result,$j,"CustomerID");
$cust_fname = mysql_result($result,$j,"cust_fname");
$cust_lname = mysql_result($result,$j,"cust_lname");
$cust_mname = mysql_result($result,$j,"cust_mname");
$cust_info = "$cust_lname $cust_fname $cust_mname. $CustomerID";

print (",\"$cust_info\"");

print ("];\n");
print ("</script>\n");

and now the whole shabang.....autocomplete script and all......

<form method="post" action="/not_for_u/trans.php">
<font size = 5>Current Customer?</font><br><br>
<font size = 3>Select Customer:</font>

function textboxSelect (oTextbox, iStart, iEnd) {

switch(arguments.length) {
case 1:
oTextbox.select();
break;

   case 2:
       iEnd = oTextbox.value.length;
       /* falls through */

   case 3:          
       if (isIE) {
           var oRange = oTextbox.createTextRange();
           oRange.moveStart("character", iStart);
           oRange.moveEnd("character", -oTextbox.value.length + iEnd);      
           oRange.select();                                              
       } else if (isMoz){
           oTextbox.setSelectionRange(iStart, iEnd);
       }

}

oTextbox.focus();
}

function textboxReplaceSelect (oTextbox, sText) {

oTextbox.focus();
}

function autocompleteMatch (sText, arrValues) {

for (var i=0; i < arrValues.length; i++) {
if (arrValues.indexOf(sText) == sText.charAt(i)) {
return arrValues;
}
}

return null;

}

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {
case 38: //up arrow

case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up

case 34: //page down

case 36: //home

case 35: //end

case 13: //enter

case 9: //tab

case 27: //esc

case 16: //shift

case 17: //ctrl

case 18: //alt

case 20: //caps lock
case 8: //backspace

case 46: //delete
return true;
break;

   default:
       textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));
       var iLen = oTextbox.value.length;

       var sMatch = autocompleteMatch(oTextbox.value, arrValues);

       if (sMatch != null) {
           oTextbox.value = sMatch;
           textboxSelect(oTextbox, iLen, oTextbox.value.length);
       }  

       return false;

}
}

   </script>

<?
include("config.inc");
$db = mysql_pconnect($hostname, $sqluser, $sqlpass);

print (",\"$cust_info\"");

print ("];\n");
print ("</script>\n");

?>
</head>
<body>
Curent Client
<p>Type Name in Exact Case:<br />
<input name='cust_info' type="text" size='30' value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p>
</body>
</html>