我在Typeahead.js预取中出错的地方

Question

我一直在努力使typeahead.js（ https://github.com/twitter/typeahead.js ）正常工作。

我可以使用本地版本，但是无法使用预取。 我有一个从connection.php文件生成的result.json文件。 JSON包含first_names和last_names。 如果我可以使用这种简单的方法来工作，我想我会对自己要去的地方有更好的了解。

我在下面包含了我的文件。

本地方法-工作

的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>

预取方法-不起作用

的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);

?>

如果有帮助，请采用以下格式的我的results.json文件；

[{"first_name":"PENELOPE","last_name":"GUINESS"},{"first_name":"NICK","last_name":"WAHLBERG"},{"fir...... ...

我感谢任何人可以提供的任何帮助或指示，对此我还很陌生，并且希望学习尽可能多！

更新1根据@mgobi_php的建议，我看了看chrome开发工具控制台，可以看到"XHR finished loading: GET "http://localhost/dvd/countries.json"所以看来json文件已被识别，但不加载？

Answer 1

由于displayKeys的命名错误，因此JSON文件未存储数据。 现在已修复。

我在Typeahead.js预取中出错的地方

问题描述

本地方法-工作

预取方法-不起作用

1 个解决方案

解决方案1
0 已采纳 2014-07-22 18:35:40

我在Typeahead.js预取中出错的地方

问题描述

本地方法-工作

预取方法-不起作用

1 个解决方案

解决方案1 0 已采纳 2014-07-22 18:35:40

解决方案1
0 已采纳 2014-07-22 18:35:40