Searching through JSON objects with input from HTML input

Question

I have a JSON file which I get using jQuery.

I would like to know how to search through the items and only get the items related to the HTML input.

This is what I tried:

 function Search(form) {

        $(".products").empty();
        $.getJSON('products.json', function(data) {
            $(data.Products).each(function(index, item) {
                if(form == item.Name) {

                    var input = document.getElementById('searchForm');

                    $('<div/>', {'class':'productname'}).text(item.Name).append(
                            $('<div/>', {'class':'productdetails', text:'Album: '+item.Album}),
                            $('<div/>', {'class':'productdetails'}).append($('<img>').attr({src:item.Source,title:item.Name,alt:item.Name,class:'productimage'})),
                            $('<div/>', {'class':'productdetails', text:'Genre: '+item.Genre}),
                            $('<div/>', {'class':'productdetails', text:'Price: '+item.Price}),
                            $('<div/>', {'class':'productdetails', text:'Quantity: '+item.Quantity}),
                            $('<div/>', {'class':'productdetails', text:'Tracks: '+item.Tracks}),
                            $('<div/>').append(
                                    $('<button />', {'class':'productbutton'})
                                            .text('Add To Cart.')
                                            .click(function(){
                                                $.fn.SaveToCart(i,item.Name, item.Album, item.Price);
                                            })
                            )
                    ).appendTo(".products");
                }   else if (form == item.Album) {

                    var input = document.getElementById('searchForm');

                    $('<div/>', {'class':'productname'}).text(item.Name).append(
                            $('<div/>', {'class':'productdetails', text:'Album: '+item.Album}),
                            $('<div/>', {'class':'productdetails'}).append($('<img>').attr({src:item.Source,title:item.Name,alt:item.Name,class:'productimage'})),
                            $('<div/>', {'class':'productdetails', text:'Genre: '+item.Genre}),
                            $('<div/>', {'class':'productdetails', text:'Price: '+item.Price}),
                            $('<div/>', {'class':'productdetails', text:'Quantity: '+item.Quantity}),
                            $('<div/>', {'class':'productdetails', text:'Tracks: '+item.Tracks}),
                            $('<div/>').append(
                                    $('<button />', {'class':'productbutton'})
                                            .text('Add To Cart.')
                                            .click(function(){
                                                $.fn.SaveToCart(i,item.Name, item.Album, item.Price);
                                            })
                            )
                    ).appendTo(".products");



                }
            });
        });
    };

    $(document).ready(function() {
        $('#searchForm').submit(function(e) {
            e.preventDefault();
            Search(this);
        });
    });

HTML:

   <form name="searchForm" id="searchForm" >
<input name="productname" id="productname" type="text">
<input type="submit" value="Search">
 </form>

Trying this code only refreshes the page.

Any idea on how I can fix it?

Perhaps you can work with this? stackoverflow.com/questions/11727316/… — Tim Vermaelen
– Tim Vermaelen, Commented Apr 25, 2013 at 11:53
@TimVermaelen Hi, I already got a 'categories' function to work. What I need is to view JSON data based on the user input in the search box. — JustAJDoe
– JustAJDoe, Commented Apr 25, 2013 at 12:47

billyonecan · Accepted Answer · 2013-04-25 12:11:03Z

1

You need to prevent the form from being submitted. You can either just add return false; at the very bottom of the Search() function (before the last };), or remove the inline onsubmit and attach a submit handler to the form using jQuery, which will allow you to use preventDefault():

$(document).ready(function() {
  $('#searchForm').submit(function(e) {
    e.preventDefault(); 
    Search(this);
  });
});

Also, you have a spelling error in the following line:

var input = document.getElementById('searhForm');

Should be

var input = document.getElementById('searchForm');

edited Apr 25, 2013 at 12:11

answered Apr 25, 2013 at 11:59

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JustAJDoe Over a year ago

(I added return false; and fixed the the spelling mistake, however nothing happens.)

billyonecan Over a year ago

Inside of your <script></script> tags

billyonecan Over a year ago

You'll have to start debugging it - check your console, make sure the ajax request is being sent, validate the data coming back etc.

JustAJDoe Over a year ago

Yes I know it's in the script tag, but would I have to remove the code I already did or use it conjunction with ?

billyonecan Over a year ago

You don't have to remove any code. If you're using the latter example (the jQuery one), just remove the inline onsubmit from your form element

|

Collectives™ on Stack Overflow

Searching through JSON objects with input from HTML input

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related