如何使用自动完成功能将MySQL数据编码为Bootstrap输入标记?

时间:2017-07-08 06:23:56

标签: php jquery ajax bootstrap-tags-input

我正在使用PHP在我的项目中创建此引导输入标记。

现在,如何使用MySQL中的数据填充restrictTosuggestions

<!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数据值,例如&#34; SELECT account_username FROM tbaccounts&#34;建议:和限制:这可能吗?

所以这是我的脚本

<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); to restrictTo:和Suggstions:在SuggestOnClick功能?

1 个答案:

答案 0 :(得分:0)

您始终可以使用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"));