Typeahead.js 基础与 MySQL 数据库答案

【问题标题】：Typeahead.js Basic With MySQL DBTypeahead.js 基础与 MySQL 数据库
【发布时间】：2014-07-08 12:54:29
【问题描述】：

我正在关注一个在线教程 (http://mycodde.blogspot.co.uk/2013/12/typeaheadjs-autocomplete-tutorial-ajax.html#comment-form)，其中涉及 typeahead.js 和一个简单的 MySQL 数据库，但我无法让它工作。

使用 typeahead.js v10.2 jQuery v1.9.1 和 Bootstrap v3.2.0

我已经包含了必要的 css 和 js 文件，我还创建了一个 connection.php 文件，它成功连接到我的 localhost db。

问题在于自动建议框不会自动建议任何内容。我可能在做一些愚蠢的事情，因为我是 js 和编程的新手。

如果有人愿意为我指出正确的方向，我将我的文件包含在下面，我将不胜感激。

index.php

<!DOCTYPE>
<html lang="en">

<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<title>Typeahead.js Tutorial with Mysql Database</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
</head>

<body>
<input type="text" name="search" id="search"></div>       
</body>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>  
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/bloodhound.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.bundle.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.jquery.js"></script> 
<script>
$("document").ready(function(){
    $("#search").typeahead({
        name : 'sear',
        remote: {
            url : '/connection.php?query=%QUERY'
        }

    });
});
</script>

</html>

连接.php

<?php

$con=mysqli_connect("localhost","myuser","mypassword","mydb");

// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT first_name,last_name FROM actor");

while($row = $result->fetch_object()){
            $user_arr[] = $row->first_name;
            $user_arr2[] = $row->last_name;

}

mysqli_close($con);

?>

当我检查萤火虫控制台时，我得到一个 Uncaught TypeError: undefined is not a function 出现在第 22 行；

$("#search").typeahead({

有人可以帮忙吗？

谢谢

【问题讨论】：

标签： javascript php mysql ajax typeahead.js

【解决方案1】：

您需要在 .js 文件中添加以下代码：

    var search = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('sear'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    remote: {
        url: '/connection.php?query=%QUERY',

        filter: function(list) {
            return $.map(list, function(search) {
                return {
                    name: sear
                };
            });
        }
    }
});

json 文件包含一个字符串数组，但 Bloodhound 建议引擎需要 JavaScript 对象，因此这会转换所有这些字符串。

【讨论】：

【解决方案2】：

在这里检查你的 jquery DOM Ready 绑定处理程序语法：

$("document").ready(...

应该是

$( document ).ready(...

【讨论】：

谢谢@itnelo - 我现在已经改变了这个，那个特定的错误已经从控制台日志中消失了，但是它仍然不起作用。我已确保我的所有脚本都是最新的，并相应地修改了我的原始帖子。
您的 php 脚本从数据库收集数据，但我没有看到在 jquery ajax 回调中将数据从服务器传输到客户端，该数据应打印到页面。你确定此时你的服务器做了什么“echo json data”操作？