使用 Ajax 和 PHP 在 JSON 中搜索答案

【问题标题】：Searching inside a JSON using Ajax and PHP使用 Ajax 和 PHP 在 JSON 中搜索
【发布时间】：2013-05-16 08:46:06
【问题描述】：

我有一个名为 items.json 的 JSON 文件。我需要创建一个小的搜索框，我可以在其中输入名称或类别，并在我键入时执行实时搜索。返回应该是：

如果我搜索 AX，它应该会在我键入时显示所有以 AXE 开头的项目。如果我搜索 Hygene，它应该会列出该类别下的所有产品。

所以基本上它应该是一个带有实时搜索字段的 HTML 字段，它通过 Ajax 从 JSON 文件中获取数据。如果我也可以使用 PHP，那就太好了。

[
    {
        "product": "132431",
        "productName": "AXE Body Spray",
        "categoryName": "Hygene"
    },
]

如果您有任何想法，我将永远感激不尽。我真的很不擅长这个，越具体越好。

关于如何实现这两个想法：http://blog.comperiosearch.com/wp-content/uploads/2012/06/instantsearch.html 或 jQuery Autocomplete。我花了几个小时阅读文档，但我做错了，我没有足够的经验。

【问题讨论】：

为什么要使用 AJAX 和 PHP 在 JSON 字符串中进行搜索？只需在对象中加载一次，然后使用 Javascript/JQuery 即可。你有什么理由做不到吗？
有一个 jQuery“自动完成”插件，但也许你想要一些更基本的东西，比如自己循环数组：stackoverflow.com/questions/3010840/…
不，自动完成看起来不错，但不知道如何实现它，因为我的 JSON 文件需要保持独立，我被困在那里。然而，这更像是我试图实现的东西：blog.comperiosearch.com/wp-content/uploads/2012/06/…

标签： php jquery xml ajax json

【解决方案1】：

您最好执行搜索客户端，如果您的数据如此简单，则不需要插件。这是您可以详细说明的 Javascript 工作示例：

var Test = {

    Items : [   {   "product": "132431",
                    "productName": "AXE Body Spray 1",
                    "categoryName": "Hygene"
                },
                {   "product": "132432",
                    "productName": "AXE Body Spray 2",
                    "categoryName": "Hygene"
                },
                {   "product": "132433",
                    "productName": "AXE Body Spray 3",
                    "categoryName": "Hygene"
                },
                {   "product": "11",
                    "productName": "Bacon",
                    "categoryName": "Food"
                },
                {   "product": "12",
                    "productName": "Eggs",
                    "categoryName": "Food"
                },
                {   "product": "9",
                    "productName": "Beer",
                    "categoryName": "Beverages"
                }
            ],


    searchProduct: function(search) {
        var founds = $.grep(Test.Items, function(value, index) {
                        return value.productName.substring(0, search.length) == search;
                    });
        Test.printResults(founds);
    },


    searchCategory: function(search) {
        var founds = $.grep(Test.Items, function(value, index) {
                        return value.categoryName.substring(0, search.lenght) == search;
                    });
        Test.printResults(founds);
    },


    printResults: function(founds)  {
        var html = "";  
        $.each(founds, function(key, item) {
            html += "<option>" + item.productName + "</option>\n";
        });
        alert(html);
    }

};

您可以这样测试它：Test.searchProduct("AXE"); 或 Test.searchCategory("Food");。祝你好运！

【讨论】：

我一直在寻找这样的东西来实现：blog.comperiosearch.com/wp-content/uploads/2012/06/… 但无法弄清楚。
但是你链接的这个页面做了一个非常不同的事情：它从另一个站点（在这种情况下是维基百科）请求一个 JSON，然后解析它。这意味着调用者不进行搜索或过滤。也许您应该提供有关您所说的这个 JSON 文件的更多详细信息：这是一个真实的文件还是什么？为什么你需要它来保持分离？它在哪里？根据情况，我们可能会为您指明一种方式。
这是我硬盘上的一个简单 .json 文件，其中包含所有数据。我需要能够通过 Ajax 搜索数据中的产品或类别，这些产品或类别显示在我可以放在网站上的简单搜索字段中。
你有两种主要的方法来完成它：1：为每次搜索发出一个ajax请求，这意味着你发送关键字，一个php脚本每次加载文件，过滤它，并输出一个JSON .在这种情况下，您的 javascript 代码将与您在上面发布的链接中的代码非常相似。 2：将整个json下载到客户端一次（即在您到达页面之后），并以类似于我之前编写的代码的方式在本地搜索它。我建议选择第二种方式，但这取决于你。尝试一些事情并告诉我们您需要帮助的地方，提供您为该任务编写的代码。
PS：我假设你说on my hard drive实际上是指它在网络服务器的驱动器上。

【解决方案2】：

您可以使用这个：http://w3schools.com/php/php_ajax_livesearch。（或者只是谷歌：“php autocompleat ajax”）祝你好运

【讨论】：

通常人们会描述他们的链接包含的内容。如果您的链接损坏，您的回答将一文不值。
是的，他的回答可能更完整一些，但我得到了它并搜索了它，我不得不说，这是一个优雅的解决方案。现在，如果我能设法从我的 .json 文件中实现......唷，我会是一个幸运的人。
好吧....只需按照以下步骤操作：加载 json 文件并使用 json 解码器内置 php 函数对其进行解码...php.net/manual/en/function.json-decode。 php
@Vince 如你所见，链接已失效，详细解释绝对值得。