Question

I got problem to integrate between JSON data generated from PHP and Bootstrap Tagsinput plugin. The codes as follows :

PHP : test.php

<?php 

include 'func.inc.php';
header('Content-type: application/json');

$sql = "SELECT staff_no, staff_name FROM users";
$db = new DB();
$db->query($sql);
$users = array();
while ($r = $db->assocs()) {
    $users[] = $r;
}

echo json_encode($users);
?>

JSON Data :

[{"staff_no":"3600511","staff_name":"Mohd Azrull Masnam"},{"staff_no":"3600749","staff_name":"Munirah Mokhtar"},{"staff_no":"2700342","staff_name":"Mohd Azrulhan Mohd Shafei"},{"staff_no":"2700075","staff_name":"Jimat Noh"}]

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-tagsinput.css">
</head>
<body>
<input class="sendTo" data-role="tagsinput" type="text">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/typeahead.bundle.min.js"></script>
<script src="js/bootstrap.tagsinput.min.js"></script>
<script>
    var staff = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('staff_name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: 'test.php'
      });
      staff.initialize();

      $('.sendTo').tagsinput({
        itemValue: 'staff_no',
        itemText: 'staff_name',
        typeaheadjs: {
          name: 'staff',
          displayKey: 'staff_name',
          source: staff.ttAdapter()
        }
      });
</script>
</body>

I try every example and google about this issue for several days but still unable to find the solutions. Appreciated if someone from here can assist me.

Bootstrap Tagsinput not working with PHP JSON data

0 个答案: