Javascript 引导Typeahead：以json的形式从数据库获取数据

我在引导typeahead以json数组的形式从MySQL数据库返回数据时遇到问题

以下是我目前掌握的情况：

$('.typeahead').typeahead({
    items: 5,
    source: function (query, process) {
        $.ajax({
            url: 'typeahead.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + query,
            success: function(data) {
                process(data);
            }
        });
    },
    highlighter: function(data) {
        // decode JSON data and return it here
    },
    updater: function(data) {
        console.log("CLICKED!");
    },
});

下面是PHP文件：

$search_for = $_POST['query'];
$return = array();

$stmt = $cxn->prepare('SELECT username, display_name FROM users WHERE username LIKE concat("%", ?, "%") OR display_name LIKE concat("%", ?, "%")');
$stmt->bind_param('ss', $search_for, $search_for);
$stmt->execute();
$result = $stmt->get_result();

while (($row = $result->fetch_assoc())) {
    array_push($return, array($row['username'], $row['display_name']));
}

$json = json_encode($return);
echo $json;

下面是它返回的JSON：

[["username","Display Name"],["username2","Display Name 2"]]

但是，当我测试typeahead时，这段代码不起作用。控制台中出现以下错误：

因此，我的问题是，如何正确地从数据库中获取多个数据片段并将其放入json数组中？

：

while (($row = $result->fetch_assoc())) {
    array_push($return, array($row['username'], $row['display_name']));
}

使用：

JavaScript文件：

---

您正在使用数据创建一个数组。尝试在变量中获取原始结果，然后在不经过循环的情况下对其调用json_encode（）。

while (($row = $result->fetch_assoc())) {
    if (isset($row)) $return[] = $row;
}

function maketypeahead() {
    $(document).ready(function() {
       $('input.typeahead').typeahead({
         items: 5,
         source: function (query, process) {
            $.ajax({
              url: 'typeahead.php',
              type: 'POST',
              dataType: 'JSON',
              data: 'query=' + query,
              success: function(data) {
                console.log(data);
                process(data);
              }
            });
          },
          highlighter: function(item) {
         // Split JSON Array into multiple pieces of data from a database
              var parts = item.split('#'),
              html2 = '<div class="typeahead">';
              html2 += '<div class="media">'
              html2 += '<div class="media-body">';
              html2 += '<span>'+parts[0]+'</span>'+'<br><span style="font-size:7pt" >('+parts[1]+')</span>'+'</p>';
              html2 += '</div>';
              html2 += '</div>';
              return html2;
            },
        updater: function (item) {
            var parts = item.split('#');
            return parts[1];
        },
        });
      });
}

// Run typeahead function
maketypeahead();

<?php
// First you need to connect to your database
$hostname_connection = "localhost";
$database_connection = "cms_db";
$username_connection = "root";
$password_connection = "root";
$connection = mysql_connect($hostname_connection, $username_connection, $password_connection) or trigger_error(mysql_error(),E_USER_ERROR); 
mysql_select_db($database_connection, $connection);

// Select multiple pieces of data from a database
$query = "SELECT username, display_name FROM `users` ";
  if(isset($_POST['query'])){
    $query .= ' WHERE username LIKE "%'.$_POST['query'].'%"' ;
  }
$rs = mysql_query($query) or die(mysql_error());

// And put it into a json array
$return = array();  
while ($rs_db['query'] = mysql_fetch_assoc($rs)){
//
$return[] = $rs_db['query']['username'].'#'.$rs_db['query']['display_name'];    
};
$json = json_encode($return);
print_r($json);
?>

@charset "utf-8";
/* CSS Document */

.typeahead.dropdown-menu {
    color: #000;
    background-color: #FFFFFF;
    padding: 0;
    margin: 10px;
}
.typeahead a {
    color: #000;
    background-color: #FFFFFF;
    padding: 0;
    margin: 10px;
    vertical-align: middle;
}
.typeahead {
    padding: 0px 5px;
    min-width: 250px;
}
.typeahead.dropdown-menu {
    z-index: 200000;
}
.modal-body {
    overflow-y: inherit;
}