使用Ajax和PHP在JSON中搜索

我有一个名为items.JSON的JSON文件。我需要创建一个小搜索框，在其中输入姓名或类别，并在键入时执行实时搜索。报税表应为：

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

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

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

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

关于如何实现this或jQuery自动完成的两个想法。我花了好几个小时阅读文档，但我做错了什么，我的经验不够。

你可以用这个：。 （或者只是谷歌的“php自动完成ajax”）

---

祝你好运

你最好在客户端执行搜索，如果你的数据这么简单，就不需要插件了。下面是一个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);
    }

};

var测试={
项目：[{“产品”：“132431”，
“产品名称”：“斧头身体喷雾1”，
“categoryName”：“Hygene”
},
{“产品”：“132432”，
“产品名称”：“斧头身体喷雾2”，
“categoryName”：“Hygene”
},
{“产品”：“132433”，
“产品名称”：“斧头身体喷雾3”，
“categoryName”：“Hygene”
},
{“产品”：“11”，
“产品名称”：“培根”，
“类别名称”：“食品”
},
{“产品”：“12”，
“产品名称”：“鸡蛋”，
“类别名称”：“食品”
},
{“产品”：“9”，
“产品名称”：“啤酒”，
“类别名称”：“饮料”
}
],
searchProduct:功能（搜索）{
var founds=$.grep（Test.Items，函数（值，索引）{
返回值.productName.substring（0，search.length）=search；
});
测试。打印结果（founds）；
},
搜索类别：功能（搜索）{
var founds=$.grep（Test.Items，函数（值，索引）{
返回值.categoryName.substring（0，search.lenght）=search；
});
测试。打印结果（founds）；
},
打印结果：函数（founds）{
var html=“”；
$。每个（基础、功能（键、项）{
html+=“”+item.productName+“\n”；
});
警报（html）；
}
};

您可以这样测试它：

test.searchProduct（“AXE”）或
测试搜索类别（“食品”）。
祝你好运
 为什么要使用AJAX和PHP在JSON sring中搜索？只需在对象中加载一次，然后使用Javascript/JQuery即可。有什么原因让你不能这么做吗？有一个jQuery“autocomplete”插件，但也许你想要一些更基本的东西，比如你自己在数组上循环：不，autocomplete看起来不错，但不知道如何实现，因为我的JSON文件需要保持独立，我被卡在那里了。然而，这更像是我试图实现的：通常人们描述他们的链接包含什么。如果你的链接断了，你的答案就一文不值了。是的，他的答案可能会更完整一点，但我找到了并搜索了它，我不得不说，这是一个优雅的解决方案。现在，如果我能够实现我的.json文件的表单。。。。哦，我会是个幸运的人。嗯。。。。只需遵循以下步骤：加载json文件并使用php函数中的json解码器对其进行解码…php.net/manual/en/function.json-decode。php@Vince正如你所预见的，连接现在断了，一个详细的解释绝对是值得的。我一直在寻找这样的东西来实现：但我想不出来。但是你链接的这个页面做了一件非常不同的事情：它从另一个站点（在本例中是wikipedia）请求一个JSON，然后解析它。这意味着调用者不进行搜索或过滤。也许你应该提供更多关于这个JSON文件的细节：这是一个真实的文件还是什么？你为什么需要它来保持分离？它在哪里？根据具体情况，我们可能会为您指明一种方法。它是我硬盘上的一个简单的.json文件，包含所有这些数据。我需要能够通过Ajax搜索数据中的产品或类别，在我可以放在网站上的一个简单搜索字段中显示。实现这一点的主要方法有两种：1：每次搜索都发出Ajax请求，这意味着每次发送关键字，php脚本都会加载文件，对其进行过滤，并输出JSON。在本例中，您的javascript代码看起来与您上面发布的链接中的代码非常相似。2：将整个json下载到客户端一次（即，到达页面后），并以类似于我之前编写的代码的方式在本地搜索。我建议你选择第二条路，但这取决于你。试着告诉我们您在哪里需要帮助，提供您为任务编写的代码。PS：我假设您在我的硬盘上说
，实际上是指它在web服务器的驱动器上。