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?

Answer 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');