twitter bootstrap typeahead not working
Question
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.
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 data looks like
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 name in 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 data as id ).
I am just lost at this stage as i am not getting any error. I will appreciate any push to right direction.
2 answers
solution1
2 ACCPTED 2013-10-08 10:42:24
I managed to get this done by following this topic
http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/
solution2
-5 2015-09-15 15:23:48
<!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>
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.