helloxielan 2014-01-21 18:45 采纳率: 0%
浏览 42


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.

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.

This is my main HTML file that I'm using. It literally has one field in it.

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


Type in a search: <input type="text" name="user_search">

<script type='text/javascript'>
   name: 'user_search',
   remote: './type-ahead-ajax.php?query=%QUERY',

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'


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

    // 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/>";

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

  • 写回答

1条回答 默认 最新

  • MAO-EYE 2014-01-21 18:50

    When you do $('#user_search'), you're referring to an element with id user_search. You haven't, however, given your input any 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.




    • ¥15 存储过程或函数中的结果集类型变量如何使用。
    • ¥80 关于海信电视聚好看安装应用的问题
    • ¥15 vue引入sdk后的回调问题
    • ¥15 求一个智能家居控制的代码
    • ¥15 ad软件 pcb布线pcb规则约束编辑器where the object matpcb布线pcb规则约束编辑器where the object matchs怎么没有+15v只有no net
    • ¥15 虚拟机vmnet8 nat模式可以ping通主机,主机也能ping通虚拟机,但是vmnet8一直未识别怎么解决,其次诊断结果就是默认网关不可用
    • ¥20 求各位能用我能理解的话回答超级简单的一些问题
    • ¥15 yolov5双目识别输出坐标代码报错
    • ¥15 这个代码有什么语法错误
    • ¥15 给予STM32按键中断与串口通信