0

我有一个使用 jQuery 获得的 JSON 文件。

我想知道如何搜索项目并只获取与 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>

尝试此代码只会刷新页面。

关于如何修复它的任何想法？

4

1 回答 1

1

您需要阻止提交表单。您可以在函数return false;的最底部添加（在最后一个之前），或者删除内联并使用 jQuery 将处理程序附加到表单，这将允许您使用：Search()};onsubmitsubmitpreventDefault()

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

此外，您在以下行中有拼写错误：

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

应该

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

于 2013-04-25T11:59:55.210 回答