I wrote this code to do autocomplete from a PHP array but it is not working, can anybody help?
PHP array:
$cars = array("Volvo", "BMW", "Toyota");
My form:
<form id="frm" method="post">
<input id="cartag" type="text" name="car">
</form>
JS script:
$(function() {
var availableTags = [ <?php echo implode(',', $cars); ?>];
$( "#cartag" ).autocomplete({
source: availableTags
});
});
If you want to use a PHP array in jQuery, you have to use json_encode.
like this:
var availableTags = <?php echo json_encode($cars); ?>;
Working demo:
<?php
$cars = array("Volvo", "BMW", "Toyota");
?>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form id="frm" method="post">
<input id="cartag" type="text" name="car">
</form>
<script>
$(function() {
var availableTags = <?php echo json_encode($cars); ?>;
$( "#cartag" ).autocomplete({
source: availableTags
});
});
</script>
You need to quote each string in the array (otherwise they'll be treated as variables, which are undefined):
var availableTags = [ <?php echo '"' . implode('","', $cars) . '"'; ?> ];
You need jquery ui.
Here is a simplified version, without considering PHP;
jsfiddle
var lst = ["Volvo", "BMW", "Toyota"];
$( "#cartag" ).autocomplete({
source: lst
});
to parse your array correctly from PHP to js:
<script type='text/javascript'>
<?php
$php_array = array('abc','def','ghi');
$js_array = json_encode($php_array);
echo "var javascript_array = ". $js_array . ";\n";
?>
</script>
