Bootstrap Typeahead：以json的形式从数据库获取数据

Question

I'm having issues with getting bootstrap typeahead to return data as a json array from my MySQL database.

Here's what I have so far:

$('.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!");
    },
});

And here's the PHP file:

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

And here's the JSON it returns:

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

However, this code doesn't work when I test out the typeahead. It gives the following error in console:

So, my question is, how do you properly get multiple pieces of data from a database and put it into a json array?

Answer 1

instead:

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

use:

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

Answer 2

JavaScript file :

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 File (typeahead.php) :

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

CSS FILE

@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;
}