Question

我一直在尝试让typeahead.js（https://github.com/twitter/typeahead.js）工作。

我可以使本地版本正常工作，但是我无法使预取工作正常。我有一个从connection.php文件生成的results.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 dev工具控制台，可以看到"XHR finished loading: GET "http://localhost/dvd/countries.json"所以看起来json文件被识别，但是没有加载？

Answer 1

由于displayKeys命名错误，JSON文件未存储数据。现在修好了。

我在哪里使用Typeahead.js预取错了

本地方法 - 工作

预取方法 - 无法正常工作

1 个答案: