Where I am Going Wrong With Typeahead.js Prefetch
Question
I have been trying all week to get typeahead.js ( https://github.com/twitter/typeahead.js ) to work.
I can get the local version working, however I cannot get the prefetch working. I have a results.json file that is generated from a connection.php file. The JSON contains first_names and last_names. If I can get this simple methods to work I think I will have a better understanding of where I am going wrong.
I have included my files below.
local method - working
index.php
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/typeahead.bundle.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="countries">
<div class="demo">
<input class="typeahead form-control" type="text" placeholder="Countries" autocomplete="off" spellcheck="false" dir="auto" >
<input class="typeahead form-control" type="text" disabled="" autocomplete="off" spellcheck="false" style="visibility: hidden; ">
</div>
</div>
<script>
$(document).ready(function() {
var numbers;
var countries = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
local: [
{ name: 'Andorra' },
{ name: 'United Arab Emirates' },
{ name: 'Afghanistan'},
{ name: 'Antigua and Barbuda'},
{ name: 'Anguilla'},
]
});
countries.initialize();
$('.countries .typeahead').typeahead(null, {
displayKey: 'name',
source: countries.ttAdapter()
});
});
</script>
</div>
</body>
</html>
prefetch method - not working
index.php
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/typeahead.bundle.js"></script>
<script src="js/examples.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="names">
<div class="demo">
<input class="typeahead form-control" type="text" placeholder="names" autocomplete="off" spellcheck="false" dir="auto" >
<input class="typeahead form-control" type="text" disabled="" autocomplete="off" spellcheck="false" style="visibility: hidden; ">
</div>
</div>
</div>
</body>
</html>
example.js
$(document).ready(function() {
var numbers;
var countries = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: {
url: './countries.json',
filter: function(list) {
return $.map(list, function(country) { return { name: country }; });
}
}
});
countries.initialize();
$('.countries .typeahead').typeahead(null, {
name: 'countries',
displayKey: 'name',
source: countries.ttAdapter()
});
});
connection.php
<?php
$dbhost = 'localhost';
$dbuser = 'myuser';
$dbpass = 'password';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT first_name, last_name FROM actor';
mysql_select_db('mydb');
$return_arr = array();
$fetch = mysql_query("SELECT first_name, last_name FROM actor");
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['first_name'] = $row['first_name'];
$row_array['last_name'] = $row['last_name'];
array_push($return_arr,$row_array);
}
$fp = fopen('results.json', 'w');
fwrite($fp, json_encode($return_arr));
mysql_close($conn);
?>
My results.json file in in the following format if that helps;
[{"first_name":"PENELOPE","last_name":"GUINESS"},{"first_name":"NICK","last_name":"WAHLBERG"},{"fir...... ...
I appreciate any help or direction that anybody can lend, I am quite new to this and would like to learn as much as possible!
update 1 Following advice from @mgobi_php I had a look at the chrome dev tools console and can see "XHR finished loading: GET "http://localhost/dvd/countries.json" So it seems like the json file is being recognised, but not loading?
1 answers
solution1
0 ACCPTED 2014-07-22 18:35:40
THe JSON file wasn't storing the data due to incorrect naming of displayKeys. Now fixed.
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.