javascript - Searching through JSON objects with input from HTML input -
i have json file using jquery.
i know how search through items , items related html input.
this 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 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 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 code refreshes page.
any idea on how can fix it?
you need prevent form being submitted. can either add return false;
@ bottom of search()
function (before last };
), or remove inline onsubmit
, attach submit
handler form using jquery, allow use preventdefault()
:
$(document).ready(function() { $('#searchform').submit(function(e) { e.preventdefault(); search(this); }); });
also, have spelling error in following line:
var input = document.getelementbyid('searhform');
should be
var input = document.getelementbyid('searchform');