Question

我很感激在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'作为网址，我会收到包含'漂白'一词的所有产品

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

?>

基本上，当您输入输入字段时，没有任何反应。好像回调没有被调用，它没有返回任何东西，或者它首先没有正确注册。

有什么建议吗？

Answer 1

执行$('#user_search')时，您指的是ID为user_search的元素。但是，您没有给出input任何ID。添加它：

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

如果这不起作用，请确保通过一些查询手动访问./type-ahead-ajax.php?query=%QUERY来获取您所假设的数据，并在浏览器控制台中检查JavaScript错误。

与typeahead.js一起苦苦挣扎

1 个答案: