如何使用自动完成功能将我的 MySQL 数据编码到 Bootstrap 输入标签中？

Question

我正在我的项目中使用 PHP 创建这个 bootstrap 输入标签。

现在，如何使用 MySQL 中的数据填充 restrictTo 和 suggestions？

<!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>

在本节中，我想将建议的默认值：删除，然后将其替换为我的 MySQL 数据值，如 "SELECT account_username FROM tbaccounts" 到建议中：和 restrictTo: 是吗可能的？

这是我的脚本

<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>

这是我的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);
}

?>

现在，我怎样才能把这个 json_enccode($data);在 SuggestOnClick 函数中限制：和建议？

Answer 1

您可以随时使用 jquery ajax。

js文件

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

如何使用自动完成功能将我的 MySQL 数据编码到 Bootstrap 输入标签中？

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

php

ajax

jquery

bootstrap-tags-input