Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
1  
You don't prevent the default form submission behavior – Explosion Pills Apr 25 at 11:50
Perhaps you can work with this? stackoverflow.com/questions/11727316/… – Tim Vermaelen Apr 25 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 Apr 25 at 12:47

1 Answer

up vote 1 down vote

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

share|improve this answer
Hi, regarding the code you submitted, where do I put it ? – JustAJDoe Apr 25 at 12:45
(I added return false; and fixed the the spelling mistake, however nothing happens.) – JustAJDoe Apr 25 at 12:45
Inside of your <script></script> tags – billyonecan Apr 25 at 12:46
You'll have to start debugging it - check your console, make sure the ajax request is being sent, validate the data coming back etc. – billyonecan Apr 25 at 12:48
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 ? – JustAJDoe Apr 25 at 13:05
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.