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


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -