使用HTML輸入輸入搜索JSON對象

Question

我有一個JSON文件，我使用jQuery。

我想知道如何搜索項目，只獲取與HTML輸入相關的項目。

這是我的嘗試：

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> 

嘗試這個代碼只刷新頁面。

關於如何修復它的任何想法？

Answer 1

您需要防止提交表單。您可以只在Search()功能的最底部添加return false;（最後};前），或刪除內聯onsubmit和使用jQuery附加submit處理程序的形式，這將允許您使用preventDefault()：

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

此外，你必須在下面一行拼寫錯誤：

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

應該

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