0

我有一个名为 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。我花了几个小时阅读文档，但我做错了，我没有足够的经验。

4

2 回答 2

0

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

于 2013-05-16T09:18:57.657 回答
0

您最好执行搜索客户端，如果您的数据如此简单，则不需要插件。这是您可以详细说明的 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");. 祝你好运！

于 2013-05-16T09:26:35.520 回答