与typeahead.js苦苦挣扎

我希望得到一个简单的演示，了解Twitter typeahead.js库的一些帮助，因为我在过去两天中一直在努力。与typeahead.js苦苦挣扎

我在我的Macbook上使用MAMP开发服务器，并且有一个（大型）MySQL数据库表，我想查询它与Web页面上的typeahead字段一起使用。

这是我使用的主要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”作为一个网址，我得到的所有包含单词“漂白”

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

?>

基本上，该产品当你输入到输入字段什么都没发生。就好像这个回调没有被调用，它没有任何返回，或者它没有被正确注册。

有什么建议吗？

来源

2014-01-21 DA Morrison

小更新。我可以在Javascript控制台中看到事件实际上正在触发，因为如果我为回调页面指定了错误的URL，则每次在字段中输入字符时都会看到404错误。 –

当你做$('#user_search')，你指的是一个ID为user_search的元素。但是，您没有给出您的input任何ID。添加：

<input type="text" name="user_search" id="user_search">

如果还是不行，请确保你得到你的一些查询手动accesssing ./type-ahead-ajax.php?query=%QUERY假设数据，并为您在您的浏览器控制台JavaScript错误。

来源

2014-01-21 18:50:06 kba

嗨 - 很好的ID，但即使补充说，它仍然不适合我。我也测试了回调，脚本肯定会返回一个项目列表。例如'http：// localhost：8888/menubuilder/type-ahead-ajax.php？query = shredded％20wheat' give me“nestle bitesize shredded wheat nestle shredded wheat” –

@DAMorrison：你的输出来自echo strtolower（ $ row）.PHP_EOL;'，删除它。相反，让它打印你的JSON：在'return json_encode（$ results）;'中将'return'更改为'print'。 – kba

与typeahead.js苦苦挣扎

回答

相关问题