Typeahead 数据库方法不起作用答案

【问题标题】：Typeahead Database method not workingTypeahead 数据库方法不起作用
【发布时间】：2013-08-03 11:20:15
【问题描述】：

在这里我尝试预先输入。它在 JavaScript 中工作。如果我连接数据库它不工作。请找出问题所在。有任何替代方法可以做到这一点

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
<label for="product_search">Name Search: </label>
<input id="namesearch" type="text" data-provide="typeahead">
<label for="product_search">Test Search: </label>
<input id="search" name="search" type="text" data-provide="typeahead">
</div>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>

<script>
$(document).ready(function($) {
// Workaround for bug in mouse item selection
$.fn.typeahead.Constructor.prototype.blur = function() {
var that = this;
setTimeout(function () { that.hide() }, 250);
};

$('#product_search').typeahead({
source: function(query, process) {
return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
}
});

$('#search').typeahead({
    name: 'search',
    remote: '/search.php?query=%QUERY'
});

$('#namesearch').typeahead({
source: function(query, process) {
return ["Ravindran", "Aravinthan", "Dakshesh"];
}
});


})
</script>

</body>
</html>

和我在根文件夹中的 db search.php

<?php
$link = mysql_connect('localhost', 'root', '');
if (!$link) 
{
    die('Could not connect: ' . mysql_error());
}
if (!mysql_select_db('test')) 
{
    exit;
}

$text = mysql_real_escape_string($_GET['query']);

$sql = 'SELECT id,title FROM games WHERE name LIKE "%'. $text . '%" LIMIT 5';

$result = mysql_query($sql);

while ($row = mysql_fetch_assoc($result)) 
{
    $posts[] = array($row['id'] => $row['name']);
}
echo json_encode($posts);
mysql_close($link);
?>

【问题讨论】：

标签： php autocomplete bootstrap-typeahead typeahead typeahead.js

【解决方案1】：

您正在混合使用 2 个不同版本的 typeahead 的代码语法。

这是给Bootstrap-Typeahead的，它是Twitter Bootstrap项目的一部分：

$('#product_search').typeahead({
    source: function(query, process) {
        return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
    }
});

由于您已在代码中包含文件bootstrap-typeahead.js，因此它可以正常工作。

另一个编码为typeahead.js，同样来自Twitter，但作为一个独立项目：

$('#search').typeahead({
    name: 'search',
    remote: '/search.php?query=%QUERY'
});

当然它不起作用，因为您没有将它包含在您的项目中。

因此，选择其中一个并将您的代码仅迁移到该版本。我个人建议使用typeahead.js。

编辑：

既然你在这方面经验丰富，我会进一步帮助你。

首先，您应该在代码中包含typeahead.js 并删除对bootstrap-typeahead.js 的引用。

接下来，在您的 JS 部分中，修改代码以使用 typeahead.js 语法：

$(document).ready(function($) {

    $('#product_search').typeahead({
        name: 'products',
        local: ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]
    });

    $('#namesearch').typeahead({
        name: 'name',
        local: ["Ravindran", "Aravinthan", "Dakshesh"]
    });

    $('#search').typeahead({
        name: 'search',
        remote: '/search.php?query=%QUERY'
    });

});

您的 PHP 代码看起来不错，但我想补充一下：

$posts = array();

就在while 循环之前。

否则我认为你会没事的，剩下的就是你的挑战（如果有的话）。请记住，控制台是您的朋友。

希望对你有帮助。

【讨论】：

尊敬的先生，感谢您的回复，我包含文件 typeahead.js 但无法正常工作
就像我说的那样，您必须消除其中一个并将代码迁移到该一种语法才能使其工作。
谢谢。先生。现在我删除链接文件并链接文件 typeahead.js。但不工作。我的需求是从数据库中读取并完成的。我可以有工作的示例代码吗
你能先检查一下控制台的错误吗？您仍然有 bootstrap-typeahead 的代码，所以我猜它会产生一些错误。
如果我使用萤火虫它不会去那个功能。我不知道如何解决它。我是这个文件的新手