使用 AJAX 从数据库中获取结果答案

【问题标题】：Get results from database using AJAX使用 AJAX 从数据库中获取结果
【发布时间】：2013-12-31 17:25:57
【问题描述】：

在第 10 行，我插入了 getSuggestion(q); 以从我的数据库中获取结果，但它不起作用。

我应该放什么以便我从数据库中检索结果而其他代码保持不变？

这是我当前的代码：

<html>

    <script type="text/javascript" src="javascript/hogan-2.0.0.js"></script>
    <script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="javascript/typeahead.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.q').typeahead({
                getSuggestion(q);
            });
        });
    </script>

    <script type="text/javascript">

        //document.getElementById("suggestion")

            function getSuggestion(q) {

            var ajax;
            if(window.XMLHttpRequest)//for ie7+, FF, Chrome
                ajax = new XMLHttpRequest();//ajax object
            else
                ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
            ajax.onreadystatechange = function() {
                if(ajax.status === 200 && ajax.readyState === 4) {
                    //if result are not there then don't display them
                    if(ajax.responseText === "")
                        document.getElementById("suggestion").style.visibility = "hidden";
                    else {
                        document.getElementById("suggestion").style.visibility = "visible";
                        document.getElementById("suggestion").innerHTML = ajax.responseText;
                    }
                }
            };
            ajax.open("GET", "suggestion.php?q=" + q, false);
            ajax.send();
        }
    </script>
</html>

提前致谢。

【问题讨论】：

but it does not work 你能发布到底是什么问题。你得到什么错误。？
结果不遵循javascripttypeahead.js.
根据文档，我认为您没有正确使用 typeahead.js。
如果是这样，我该如何编码才能正确使用 typeahead.js？

标签： javascript php ajax search-engine

【解决方案1】：

替换

<script type="text/javascript">
    $(document).ready(function() {
        $('.q').typeahead({
            getSuggestion(q);
        });
    });
</script>

用这个：

<script type="text/javascript">
    $(document).ready(function() {
        $('.q').typeahead({
            name: 'q',
            remote: '/suggestion.php?q=%QUERY',
            minLength: 3, // start searching if word is at least 3 letters long. Reduces database queries count
            limit: 10 // show only first 10 results
        });
    });
</script>

这就是你所需要的。 Typeahead 完成剩下的工作。

查询在 $_GET['q']

你可以找到我的例子here

我的 index.php 看起来像这样：

<html>
<head>
    <link rel="stylesheet" href="http://twitter.github.io/typeahead.js/css/main.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('.q').typeahead({
            name: 'q',
            remote: '/typeahead/suggestion.php?q=%QUERY',
            minLength: 3, // start searching if word is at least 3 letters long. Reduces database queries count
            limit: 10 // show only first 10 results
        });
    });
    </script>
</head>
<body>
    <input type="text" class="q typeahead tt-query" />
</body>

您不需要 css 文件或类来输入。只需要“q”类。

<input type="text" class="q" />

和suggestion.php来源：

<?php
$q = $_GET['q'];
echo json_encode(array($q));
?>

如您所见，无论您当前搜索的是什么，它都会以与您输入的结果相同的结果进行回答。您必须使用json_encode 进行数据库查询和回显数组

记得给远程参数添加正确的url。

编辑：我的示例现在从 iTunes 获取数据并搜索音乐视频。示例中提供了已编辑的源代码。

【讨论】：

它不起作用。我使用上面代码中的第二个脚本得到结果。
Typeahead 自动从Suggestion.php 获取结果。检查网址是否正确。示例：（最佳图片获奖者）twitter.github.io/typeahead.js/examples 这有效，无需外部代码。检查浏览器网络活动。如果存在，它应该显示Suggestions.php和错误。
我已经尝试过这个link，但结果与 typeahead.js 所说的不符。你能帮帮我吗？
如何让建议词出现在用户输入的关键字之后，例如 google？ [例如] (twitter.github.io/typeahead.js/examples)
@user3144149 您是否将关键字存储在数据库或某个文件中？如果在数据库中，则使用 LIKE 和回显结果查询数据库。