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?
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;
}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.