1

在这里，我尝试提前输入。它在 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);
?>
4

1 回答 1

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循环之前。

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

希望能帮助到你。

于 2013-08-03T11:33:53.940 回答