javascript twitter bootstrap typeahead 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19096440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap typeahead not working
提问by Baig
I am working on twitter bootstrap typeahead and i am stuck as i am not getting any error and yet the auto complete is not working.
我正在使用 twitter bootstrap typeahead，但我被卡住了，因为我没有收到任何错误，但自动完成功能不起作用。
this is my input field
这是我的输入字段
<input type="text" id="autocomplete" />
and this is my script
这是我的脚本
<script>
$('#autocomplete').typeahead({
source: function(process) {
var data = <?php Widgets::allProducts() ?>;
process(data);
},
matcher: function(item) {
return
item.name.toLocaleLowerCase()
.indexOf(this.query.toLocaleLowerCase()) != -1;
},
highlighter: function(item) {
return item.name;
},
updater: function (item) {
alert(JSON.parse(item).value);
return JSON.parse(item).name;
}
});
</script>
this is how my var datalooks like
这就是我的var data样子
var data = [{"name":"Acne.org","id":"5"},{"name":"AcneFree","id":"6"},{"name":"Alpha Hydrox","id":"16"},{"name":"AmLactin","id":"17"},{"name":"Astara","id":"21"}];
What i want to do is get the product name listed (which is namein var data) and upon selecting the product redirect the user to product page (with the help of product id which i am getting in var dataas id).
我想要做的就是列出的产品名称（这是name在var data），并在选择的产品将用户重定向到产品页面（与我在我得到产品ID的帮助下var data为id）。
I am just lost at this stage as i am not getting any error. I will appreciate any push to right direction.
我只是在这个阶段迷路了，因为我没有收到任何错误。我将感谢任何推动正确方向的努力。
回答by Baig
I managed to get this done by following this topic
我设法通过关注这个主题来完成这项工作
http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/
http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/
回答by Ethic Or Logics
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Tokenfield for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery UI CSS -->
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
<!-- Bootstrap styling for Typeahead -->
<link href="dist/css/tokenfield-typeahead.css" type="text/css" rel="stylesheet">
<!-- Tokenfield CSS -->
<link href="dist/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<!-- Docs CSS -->
</head>
<body>
<input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="dist/bootstrap-tokenfield.js" charset="UTF-8"></script>
<script type="text/javascript" src="docs-assets/js/scrollspy.js" charset="UTF-8"></script>
<script type="text/javascript" src="docs-assets/js/affix.js" charset="UTF-8"></script>
<script type="text/javascript" src="docs-assets/js/typeahead.bundle.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="docs-assets/js/docs.min.js" charset="UTF-8"></script>
</body>
<?php
try
{
$Conn=mysqli_connect("localhost","root","","andani_play");
$Query="SELECT `GroupName` FROM `group`";
$Result=mysqli_query($Conn,$Query);
$Array=array();
if($Result)
{
while($Data=mysqli_fetch_array($Result))
{
array_push($Array,$Data[0]);
}
echo json_encode($Array);
}
else
{
echo mysqli_error($Conn);
}
}
catch (mysqli_error $e)
{
echo "error connecting to the database/host";
exit();
}
?>
<script>
$(document).ready(function(){
var engine = new Bloodhound({
/*local: [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}],*/
source: [<?php echo json_encode($Array); ?>],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$('#tokenfield-typeahead').tokenfield({
typeahead: [null, { source: engine.ttAdapter() }]
});
});
</script>
</body>
</html>
