与typeahead.js斗争

Question

I'd appreciate some help in getting a simple demo working of the Twitter typeahead.js library as I've struggled with it over the last two days. 在过去的两天里，我一直在努力地尝试着处理Twitter typeahead.js库的简单演示，希望能对我有所帮助。

I'm using a MAMP development server on my Macbook, and have a (large) MySQL database table that I'd like to query to use with a typeahead field on a Web page. 我在Macbook上使用MAMP开发服务器，并且有一个（大型）MySQL数据库表，我想查询该表以与Web页面上的typeahead字段一起使用。

This is my main HTML file that I'm using. 这是我正在使用的主要HTML文件。 It literally has one field in it. 它实际上有一个字段。

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

The source of this from the browser looks OK, but I'll paste it here too just in case. 来自浏览器的源看起来不错，但是为了以防万一，我也将其粘贴到此处。

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

I've tested my call back script separately, and it is definitely connecting to the database and pulling back some results. 我已经分别测试了我的回叫脚本，它肯定是连接到数据库并返回一些结果。 For example if I use '/type-ahead-ajax.php?query=bleach' as a URL, I get all the products containing the word 'bleach' 例如，如果我使用“ /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);

?>

Basically, when you type into the input field nothing happens. 基本上，当您在输入字段中键入内容时，不会发生任何事情。 It's as though either the callback isn't being called, it's returning nothing, or it's not registered properly in the first place. 好像没有调用回调，什么也不返回，或者没有正确注册。

Any suggestions? 有什么建议么？

Answer 1

When you do $('#user_search') , you're referring to an element with id user_search . 当您执行$('#user_search') ，您指的是ID为user_search的元素。 You haven't, however, given your input any id. 但是，您尚未input任何ID。 Add it: 添加：

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

If that doesn't work, make sure you get the data you assume by accesssing ./type-ahead-ajax.php?query=%QUERY manually with some query, and check for JavaScript errors in your browser console. 如果这不起作用，请通过手动访问./type-ahead-ajax.php?query=%QUERY并进行一些查询来确保获得假定的数据，并在浏览器控制台中检查JavaScript错误。

与typeahead.js斗争

问题描述

1 个解决方案

解决方案1
1 2014-01-21 18:50:06

与typeahead.js斗争

问题描述

1 个解决方案

解决方案1 1 2014-01-21 18:50:06

解决方案1
1 2014-01-21 18:50:06