使用AJAX从数据库获取结果

Question

In line 10, I have insert getSuggestion(q); 在第10行中，我插入了getSuggestion(q); for me to get results from my database but it does not work. 让我从数据库中获取结果，但是它不起作用。

What should I put there in order for me to retrieve results from database while other codes remain the same? 在其他代码保持不变的情况下，应该放置什么以便我从数据库中检索结果？

This is my current code: 这是我当前的代码：

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

Thanks in advance. 提前致谢。

Answer 1

Replace 更换

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

with this: 有了这个：

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

And that's all you need. 这就是您所需要的。 Typeahead does the rest. 剩下的要提前输入。

Query is in $_GET['q'] 查询在$ _GET ['q']中

You can find my example here 你可以在这里找到我的例子

My index.php looks like this: 我的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>

You dont need css file or classes to input. 您不需要CSS文件或类来输入。 Only class "q" is needed. 只需要类“ q”。

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

And suggestion.php source: 和proposal.php来源：

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

As you can see, whetever you currently search, it answers with the same result as you typed. 如您所见，无论您当前正在搜索什么，它的回答都与您键入的结果相同。 You have to make database query and echo array with json_encode 您必须使用json_encode进行数据库查询和回显数组

Remember to add correct url to remote parameter. 请记住将正确的URL添加到远程参数。

EDIT: My example now gets data from itunes and searches for music videos. 编辑：我的示例现在从iTunes获取数据并搜索音乐视频。 Edited source available in example. 示例中提供了编辑源。

使用AJAX从数据库获取结果

问题描述

1 个解决方案

解决方案1
1 2013-12-30 10:51:30

使用AJAX从数据库获取结果

问题描述

1 个解决方案

解决方案1 1 2013-12-30 10:51:30

解决方案1
1 2013-12-30 10:51:30