Autocomplete input text field with Javascript based on a PHP array

Question

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

tell us what does your JS look like after the PHP is executed. — Kelu Thatsall, Feb 06 '15 at 22:04
sorry but i am beginner, how can i tell you what does it look like after executing? — Sina Nouri, Feb 06 '15 at 22:11

score 7 · Accepted Answer · edited Apr 20 '23 at 01:06

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>

score 1 · Answer 2 · answered Feb 06 '15 at 21:39

1

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

answered Feb 06 '15 at 21:39

billyonecan

20,090
8
42
64

are you including jquery ui? – billyonecan Feb 06 '15 at 21:53
yes i do – Sina Nouri Feb 06 '15 at 21:54
json strings should not be manually crafted -- this would not be a reliable technique if the values themselves might contain double quotes. – mickmackusa Apr 20 '23 at 02:16

taesu · Answer 3 · 2015-02-06T21:57:18.300

-1

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>

edited Feb 06 '15 at 21:57

answered Feb 06 '15 at 21:37

taesu

4,482
4
23
41

i need to put php array into java array automatically, what do you suggest to do with that? – Sina Nouri Feb 06 '15 at 21:48
This doesn't say anything about how to pass the array from the php/html to the js code. – Dgloria Jul 06 '23 at 08:21

Autocomplete input text field with Javascript based on a PHP array

3 Answers3

Linked