提前输入获取远程数据问题
Typeahead get remote data issue
我的数据库中有一些产品,我使用了一个输入字段来搜索产品。我正在使用 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');
带有js的html是这样的
<!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
因为你的typehead 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);
相关文章:
- jQuery 和 Ajax 请求数据问题
- JSON Ajax 数据问题
- 请求.JS和节点.js数据问题
- EasyXDM传递数据问题
- Symfony2:Highchartsbundle数据问题
- Google Analtyics Embedded API - report.数据问题
- D3 JS - 未捕获的类型错误:无法读取未定义的属性“长度” - 似乎与数据问题有关
- 提前输入获取远程数据问题
- 异步加载数据问题 AngularJS 和 Firebase
- 提前输入.js远程发送之前发送帖子数据问题
- 在 HTML 结构中打印 JSON 数据问题
- Morris Donut图表没有数据问题
- 如何修复此本地数据问题?(Chrome扩展、Javascript、jQuery)
- 使用Spring MVC控制器在JQuery Datatable中呈现数据问题
- getJSON警报未返回任何内容-数据问题
- 渲染后挖空JS从视图模型中检索数据问题
- b4jjquery-websockets库发送数据问题
- Javascript数据表填充数据问题(没有返回错误)
- Angular数据问题——不知道如何排除
- 奇怪的jQuery数据()问题-帮助