jquery autocomplete from php vars

Question

<?php require_once('Connections/root.php'); ?> 
<?php $q = mysql_query("SELECT * FROM performer"); ?> 

<script> $(document).ready(function () {
    $(function() {
        var availableTags = ["<?php while($r = mysql_fetch_assoc($q)) { echo $r['username']; } ?>"];
        $("#search_box").autocomplete({
            source: availableTags
        });
    });
});
</script>

the script works but it displayes : User1User2User3

and i want it to display:

User1

User2

User3

How do i add a new line after every user and where do i add the line feed

if i make it like this

var availableTags = ["<?php while($r = mysql_fetch_assoc($q)) { echo $r['username'] . " <br />"; } ?>"];

i get User1User2User3 and the br as a string

Answer 1

As mentioned, your availableTags array has only 1 string variable. You need to push the string to the Array.

You can try this:

var availableTags = [];
<?php while($r = mysql_fetch_assoc($q)) { ?>
    availableTags.push('<?php echo $r['username']; ?>');
<?php } ?>

Answer 2

Separate your PHP logic from your Javascript code. Up top, build a PHP array first:

$tags = array();
while($r = mysql_fetch_assoc($q)) { 
    $tags[] = $r['username'];
}

Then in your javascript, echo the array JSON encoded:

var availableTags = <?php echo json_encode($tags); ?>;

Note: You are using deprecated mysql_* functions and should switch to mysqli_* or PDO.

Answer 3

The generated js array is not what you expect it to be. With your code, you obtain

var availableTags = ["User1User2User3"]; 

whereas what you need is

var availableTags = ["User1", "User2", "User3"];

Yous should adapt your PHP code to generate the right JS.