【发布时间】：2023-04-06 07:04:01
【问题描述】：
在获得 Twitter typeahead.js 库的简单演示工作时，我很感激一些帮助，因为我在过去两天一直在努力解决它。
我在我的 Macbook 上使用 MAMP 开发服务器，并且有一个（大型）MySQL 数据库表，我想查询它以与网页上的预输入字段一起使用。
这是我正在使用的主要 HTML 文件。它实际上只有一个字段。
type-ahead.php
<?php
// HTML5 Header stuff
echo '<!DOCTYPE html>'.PHP_EOL;
echo '<html>'.PHP_EOL;
echo '<head><meta charset="UTF-8">'.PHP_EOL;
echo '<title>Typeahead Example</title>'.PHP_EOL;
// include the two libraries for typeahead to work
echo '<script src="../jQuery/jquery-2.0.3.min.js" type="text/javascript"></script>'.PHP_EOL;
echo '<script src="../typeahead.js/typeahead.min.js" type="text/javascript"></script>'.PHP_EOL;
echo '</head>'.PHP_EOL;
echo '<body>'.PHP_EOL;
echo '<h2 class="myclass">Typeahead testing</h2>'.PHP_EOL;
echo 'Type in a search: <input type="text" name="user_search">'.PHP_EOL;
echo "<script type='text/javascript'>".PHP_EOL;
echo "$('#user_search').typeahead({".PHP_EOL;
echo " name: 'user_search',".PHP_EOL;
echo " remote: './type-ahead-ajax.php?query=%QUERY',".PHP_EOL;
//echo " minLength: 3,".PHP_EOL;
//echo " limit: 10".PHP_EOL;
echo "});".PHP_EOL;
echo "</script>".PHP_EOL;
echo '</body></html>'.PHP_EOL;
?>
来自浏览器的源代码看起来不错，但我也会将其粘贴在这里以防万一。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>Typeahead Example</title>
<script src="../jQuery/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="../typeahead.js/typeahead.min.js" type="text/javascript"></script>
</head>
<body>
Type in a search: <input type="text" name="user_search">
<script type='text/javascript'>
$('#user_search').typeahead({
name: 'user_search',
remote: './type-ahead-ajax.php?query=%QUERY',
});
</script>
</body></html>
我已经单独测试了我的回调脚本，它肯定是连接到数据库并拉回一些结果。例如，如果我使用 '/type-ahead-ajax.php?query=bleach' 作为 URL，我会得到所有包含单词 'bleach' 的产品
type-ahead-ajax.php
<?php
// Connect to the database
try {
$dbh = new PDO('mysql:host=localhost; dbname=menu;', 'root', 'root');
$query = '%'.$_GET['query'].'%'; // add % for LIKE query later
//$query = '%milk%'; //debug
echo $query.PHP_EOL;
// do query
$stmt = $dbh->prepare('SELECT title FROM waitrose WHERE title LIKE :query');
$stmt->bindParam(':query', $query, PDO::PARAM_STR);
$stmt->execute();
// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
$results[] = $row;
echo strtolower($row).PHP_EOL; //debug
}
$dbh = null;
} catch (PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
die();
}
// and return to typeahead
return json_encode($results);
?>
基本上，当您在输入字段中输入内容时，什么也不会发生。就好像回调没有被调用，它什么都不返回，或者它一开始就没有正确注册。
有什么建议吗？
【问题讨论】：
-
小更新。我可以在 Javascript 控制台中看到该事件实际上正在触发，因为如果我给它一个错误的回调页面 URL，我可以看到每次在字段中输入一个字符时出现 404 错误。
标签： javascript jquery ajax typeahead