Php 谷歌式搜索

我正在尝试创建一个应用程序，当用户键入类似于Google Instant的内容时，它会显示查询的搜索结果。它不需要像Instant一样位于搜索框下，但其思想是，查询的相关选项会随着用户的键入而显示

我有没有办法使用类似的东西

---

谢谢

您可以查看以下教程：

---

下面是我将如何使用PHP和JavaScript解决这个问题

您首先需要设置一个服务器端资源来提供搜索结果，最好是json

如果您希望以正确的方式执行此操作，请参阅关于使用PHP创建REST API的部分。听起来这就是您正在使用的服务器端技术

如果您想快速地将一些可能不那么健壮的东西拼凑在一起，以下是方法：

首先，在给定位置创建一个php文件，比如/api/search/search.php

它应该是这样的：

<?php
    // connect to mysql

    if($_GET['q']) {
        $q = $_GET['q'];

        echo json_encode(getResults($q));
    } else {
        echo "No results";
    }

    function getResults ($q) {
        $sql = "SELECT * FROM whatever WHERE whichever LIKE '%'+"+$q+"+'%'"

        //mysql_fetch_results ...

        // loop through returned result set, create an associative array of results

        // i.e. $results = array("items" => array ( array ("link" => "#", "title" ="title"), array ("link" => "#", "title" ="title"), array ("link" => "#", "title" ="title") ))

        return $results;
    }

?>

当您对/api/search/search.php执行GET请求时，这将返回json格式的结果？q=此处的查询

您需要一些客户端代码来参与服务器。基本方法是设置一个输入框，每次值更改时，使用jQuery的AJAX方法$.getJSON在这里可以很好地工作，但是您也可以使用$.GET或$.AJAX发送一个q参数等于用户查询的请求。然后附加一个回调函数，该函数在请求完成时运行，解析结果并在页面上输出。下面是一些示例

$(document).ready(function () {
    // This is your datasource url. Change this to be the resource you want
    var url = "https://www.googleapis.com/customsearch/v1?key=INSERT-YOUR-KEY&cx=013036536707430787589:_pqjad5hr1a&alt=json";

    // Attach a function to the keypress event for the input #q
    $("q").keypress(function () {

        // Get the value of the input
        var q = $(this).val();

        // Append the query to the end of the url
        url += "&q=" + q;

        // Make an ajax request to the api, and bind a function as a callback for when the request is complete
        $.getJSON(url, function (response) {

            // Store the items object. These are your results
            var results = response.items;

            var resultList = $(buildList(results));

            $("#results").empty().append(resultList);
        });

        function buildList (results) {
            // Initialize a string to hold the html formatted results
            var htmlStr = "<ul>";

            results.each(function () {

                var result = $(this);

                // Append the result's properties to your html
                htmlStr += "<li><a href='"+result.link+"'>";
                htmlStr += result.title;
                htmlStr += "</a></li>";

            });

            htmlStr += "</ul>";

            return htmlStr;
        }
    });
});

以下是标记：

<input id="q" type="text" />
<div id="results"></div>

---

祝你好运

实际上我正在查询我自己的数据库，但我将查看JQuery。无论是查询你自己的数据库还是其他API，你都需要实现客户端代码。我更新了代码，向你展示了如何在服务器上设置API。我想这应该能奏效。