CODEWITHSUNDEEP
javascriptphparraysautocomplete
Sina Nouri
Sina Nouri

Reputation: 341

Autocomplete input text field with Javascript based on a PHP array

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
    });
});

Upvotes: 5

Views: 6336

Answers (3)

PHP Worm...
PHP Worm...

Reputation: 4224

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>

Upvotes: 7

taesu
taesu

Reputation: 4580

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>

Upvotes: -1

billyonecan
billyonecan

Reputation: 20270

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) . '"'; ?> ];

Upvotes: 1

Related Questions