javascript — Typeahead получить удаленную проблему с данными
У меня есть некоторые продукты в моей базе данных, и я использовал поле ввода для поиска продуктов.
я использую машинописный для поиска товаров с удаленными данными. Моя база данных по продуктам такая
CREATE TABLE IF NOT EXISTS `products` (
`id_product` int(10) unsigned NOT NULL,
`name` varchar(128) NOT NULL,
`desc` text,
PRIMARY KEY (`id_product`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `products`
--
INSERT INTO `products` (`id_product`, `name`, `desc`) VALUES
(1, 'Apple', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2, 'Box ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2, 'Bat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2, 'Cat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2, 'Ant ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry');
И HTML с JS, как это
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="js/typeahead.bundle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery.typeahead.css">
<style>
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function () {
// instantiate the bloodhound suggestion engine
var products = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'ajax.php?search_term=%QUERY',
filter: function (products) {
return $.map(products.results, function (product) {
return {
value: product.name
};
});
}
}
});
// initialize the bloodhound suggestion engine
products.initialize();
// instantiate the typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'value',
source: products.ttAdapter()
});
}); //]]>
</script>
</head>
<body>
<input class='typeahead' placeholder='Find products...' type='text' />
</body>
</html>
В ajax.php я использовал свой пользовательский запрос, как это
$dsn = 'mysql:host=localhost; dbname=products';
$username = 'root';
$password = 'root';
$options = array(
PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
);
$dbh = new PDO($dsn, $username, $password, $options);
$query = $_REQUEST['search_term'];
$stmt = $dbh->prepare("SELECT name from `products` WHERE `name` LIKE '%".$query."%' ");
$stmt->bindParam(':query', $query, PDO::PARAM_STR);
$stmt->execute();
// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
$results[] = $row;
}
print_r($results);
// and return to typeahead
echo json_encode($results);
здесь его в массиве я получаю название продуктов, как это
Array
(
[0] => Bat
[1] => Box
)
с JSON я также получаю данные, как это
["Bat","Box"]
Но я не знаю, почему значения не приходят в раскрывающемся списке поиска? Любая помощь и предложения будут действительно заметны. Спасибо
Заметка
В консоли я получаю ошибку как
Uncaught TypeError: Cannot read property 'length' of undefined
Решение
Поскольку ваш код JS гарнитуры
filter: function (products) {
return $.map(products.results, function (product) {
return {
value: product.name
};
});
}
а именно products.results.name вам нужно отформатировать массив php так, чтобы он правильно возвращал объект json
// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
//add to 'results' with array with key 'name'
$results['results'][] = array('name'=>$row);
}
// and return to typeahead
echo json_encode($results);
Другие решения
Других решений пока нет …