How to code my MySQL data into Bootstrap input tags with autocomplete?

I'm creating this bootstrap input tag in my project using PHP.

Now, how can I populate the restrictTo and suggestions with data from MySQL?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Send Memorandum</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/memo.css" rel="stylesheet">
    <link href="css/bootstrap-tags.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
</head>

<body>
<form enctype="multipart/form-data" action="send.php" method="post" class="memo" style="padding-top:10px">
    <div class="form-group row">
        <div class="col-xs-8">
            <label for="To" style="padding-top: 10px;" >To: </label><br>
            <p>suggestOnClick</p>
            <div id="suggestOnClick"></div>
        </div>
    </div>
</form>

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tags.min.js"></script>

In this section i want to make the default value of the suggestions: to be removed and then replace it with my MySQL data values like "SELECT account_username FROM tbaccounts" into the suggestion: and restrictTo: Is that possible?

So this is my SCRIPT

<script>
$(function(){
    $("#suggestOnClick").tags({
        restrictTo: ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india"],
        suggestions: ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india"],
        promptText: "Click here to add new tags",
        suggestOnClick: true
    });
});
</script>

</body>
</html>

This is my PHP

<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "fullcalendar");
$query = "
 SELECT * FROM tbaccounts ORDER BY account_username
";

$result = mysqli_query($connect, $query);

$data = array();

if(mysqli_num_rows($result) > 0)
{
 while($row = mysqli_fetch_assoc($result))
 {
  $data[] = $row["account_username"];
 }
 echo json_encode($data);
}

?>

Now, How can i put this json_enccode($data); to restricTo: and suggstions: in the SuggestOnClick Funtion?

Solution

You can always use jquery ajax.

js file

var app={
    init:function(){
        $(document).ready(this.initialize);
    },
    initialize:function(){
        $.ajax({
            url:'php/fetch.php',
            METHOD:'GET',
            success:function(data){
                data=JSON.parse(data);
                $("#suggestOnClick").tags({
                    restrictTo: data,
                    suggestions: data,
                    promptText: "Click here to add new tags",
                    suggestOnClick: true
                });
            }
        });

    }
};
app.init();

php/fetch.php

echo json_encode(array("alpha","bravo","charlie"));