0

I have a JSON filed named items.json. I need to create a small search box in which I can input the name OR the category and perform a live search as I type. The return should be:

If I search for AXE it should display all items as I type that start with AXE. If I search for Hygene it should list all products under that category.

So basically it should be a HTML field, with a live search field, that gets the data from a JSON file via Ajax. If I could use PHP with this too, that would be great.

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

If you have any ideas I would be forever grateful. I'm really bad at this, and the more specific the better.

Both ideas on how to implement either this: http://blog.comperiosearch.com/wp-content/uploads/2012/06/instantsearch.html or jQuery Autocomplete. I've spent hours reading through the docs but I'm doing something wrong, I'm not experienced enough.

user19882
  • 113
  • 7
  • Why do you want to use AJAX and PHP to search in a JSON sring? Just load it once in an object and use Javascript/JQuery for that. Is there any reasons why you could not do that? – Eggplant May 16 '13 at 08:50
  • There exists a jQuery "autocomplete" plugin, but maybe you want something more basic, like looping over the array yourself: http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript – Adder May 16 '13 at 09:05
  • No, the autocomplete seems nice, but didn't know how to implement that because my JSON file needs to remain separate and I got stuck there. However, this is something more like what I was trying to implement: http://blog.comperiosearch.com/wp-content/uploads/2012/06/instantsearch.html – user19882 May 16 '13 at 10:05

2 Answers2

0

You can use this:http://w3schools.com/php/php_ajax_livesearch. (or just google for:"php autocompleat ajax") Good luck

Shaytj
  • 71
  • 1
  • 5
  • Usually people describe what their link contains. If you link becomes broken, your answer is worth nothing. – Vince May 16 '13 at 09:38
  • Yes, his answer might have been a bit more complete, but I got it and searched for it and I have to say, that's an elegant solution. Now if I could just manage to implement form my .json file.... phew, I would be a lucky man. – user19882 May 16 '13 at 10:10
  • well.... just follow this steps: load the json file and decode it with json decoder build-in php function...php.net/manual/en/function.json-decode.php – Shaytj May 16 '13 at 13:26
  • @Vince as you foresaw it, the link is now broken, a detailed explanation was definitely worthwhile. – Alvin Moyo Sep 01 '20 at 22:25
0

You'd better perform the search client side, and if your data is this simple, there's no need for a plugin. Here you are a working example in Javascript you can elaborate on:

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);
    }

};

You can test it like that: Test.searchProduct("AXE"); or Test.searchCategory("Food");. Good luck!

Eggplant
  • 1,903
  • 1
  • 14
  • 24
  • I was looking for something like this to implement: http://blog.comperiosearch.com/wp-content/uploads/2012/06/instantsearch.html and couldn't figure it out. – user19882 May 16 '13 at 10:03
  • But this page you linked does a very different thing: it requests a JSON from another site (wikipedia in this case) and then parses it. This means that no search nor filtering is done by the caller. Maybe you should give more detail about this JSON file you said you have: is this a real file or what? Why do you need it to stay separated? Where is it? Depending on the scenario, we may indicate you a way. – Eggplant May 16 '13 at 10:10
  • It's a simple .json file on my hard drive that contains all that data. I need to be able to search for the products or categories inside the data through Ajax, presented in a simple search field that I can put on a website. – user19882 May 16 '13 at 10:14
  • You have two main ways to accomplish that: 1: make an ajax request for every search, which means you send the keyword and a php script loads the file every time, filter it, and output a JSON. In this case your javascript code will look very similar to the one in the link you posted above. 2: download to the client the whole json once (ie. after you reach the page), and search through it locally in a similar fashion like the code I wrote before. I would advice to choose the 2nd way, but it's up to you. Try something and tell us WHERE you need help, providing the code you wrote for the task. – Eggplant May 16 '13 at 10:22
  • PS: I assumed when you say `on my hard drive` you actually mean it's on the web server's drive. – Eggplant May 16 '13 at 10:25
  • Well, yeah. The webserver is my hard drive... so I guess you would have been right assuming either way. Sorry for not being more descriptive. Anyway, I'm not looking to get code here. I'd just like to know why isn't my .json file search-able in the manner like the link I posted. That one searches Wikipedia, I'd love to know what to read/learn on how to implement that for my file instead of Wikipedia. That's it. – user19882 May 16 '13 at 10:29
  • Please read my previous comment, it tells you how you could implement it. If you decide to go for the 2nd method purposed, then you need to learn some basic Javascript and JQuery, including objects handling (your JSON), Ajax basics, and on the server side with a PHP script it will be as simple as reading your JSON file on the filesystem, and outputting it with the proper header: [file_get_contents()](http://php.net/manual/en/function.file-get-contents.php) and `header('Content-Type: application/json')`. – Eggplant May 16 '13 at 10:43