Question

我有一个数组，其数据显示在表格中。我还有日期字段和名称字段供搜索。

如果我填写所有字段，它搜索得很好。如果我只填写日期字段并将名称字段留空，搜索仍然可以正常工作，但如果我将日期字段保留为黑色并且只在名称字段中输入一些名称，即使我有该名称，它也不起作用在阵列中。

请伸出援助之手。谢谢！ jsfiddle.net

HTML

<p>From: <input class="datepicker" id="dateFrom" type="text"> To: <input class="datepicker" id="dateTo" type="text"></p>

    Name<input type="text" id="searchByName"><button type="button"  id="searchButton">SEARCH</button><span id="errmsg"></span> 

    <div class="text"></div>
    <table id="myTable" border="1" width="300" cellpadding="5">

    </table>

JS

$( ".datepicker" ).datepicker();

var dateList =[
  {
        name: "Mike Jenson",
        email: "mike_j@yesware.com",
        phone: "9433550193",
        joined: "05/23/2014",
    },
    {
        name: "Jim Stevens",
        email: "jim_s@yesware.com",
        phone: "1299331944",
        joined: "05/22/2014"
    },
    {
        name: "Paul Smith",
        email: "paul_s@yesware.com",
        phone: "4351289654",
        joined: "04/14/2014"
    },
    {
        name: "Sarah Andrews",
        email: "sarah_a@yesware.com",
        phone: "1299332944",
        joined: "03/15/2014"
    },
    {
        name: "Edward O'Brien",
        email: "edward_ob@yesware.com",
        phone: "4782456897",
        joined: "03/27/2014"
    },
    {
        name: "Nicole Plano",
        email: "nicole_p@yesware.com",
        phone: "6657831564",
        joined: "03/30/2013"
    },
    {
        name: "Peter Min",
        email: "peter_m@yesware.com",
        phone: "8893923938",
        joined: "01/07/2013"
    },
    {
        name: "Aaron Jackson",
        email: "aaron_j@yesware.com",
        phone: "6174896315",
        joined: "04/11/2014"
    }
    ];

    $('#searchButton').click(
        function()
            {
                var Namefilter = dateList.filter(
                    function(NameItem)
                    {
                        return  NameItem.name.toLowerCase().indexOf($('#searchByName').val().toLowerCase()) != -1;
                    });


                var filtered = dateList.filter(function(item){
                    return item.joined >= $('#dateFrom').val() && item.joined <= $('#dateTo').val();
                    });


                refreshTable(Namefilter); 
                refreshTable(filtered);
            }
    );




    function refreshTable(list){
        $("#myTable").html("");
        for (var i=0; i< list.length; i++)
        {
            var tr="<tr>";
            var td1 = "<td>" + list[i]["name"] + "</td>";
            var td2 = "<td>" + list[i]["email"] + "</td>";
            var td3 = "<td>" + list[i]["phone"] + "</td>";
            var td4 = "<td>" + list[i]["joined"] + "</td></tr>";
            $('#myTable').append(tr+td1+td2+td3+td4);
        }
        if(list.length==0){
             $('#myTable').html("No Data Found");
        }
    }

    refreshTable(dateList);

Answer 1

这是正确的，问题在于您的过滤器，但我建议您将日期转换为正确的比较，例如：..

            $('#searchButton').click(
                function()
                {
                    var Namefilter = dateList.filter(
                            function(item)
                            {

                                var startDate=new Date($('#dateFrom').val()).getTime();
                                var endDate =new Date($('#dateTo').val()).getTime();
                                var dateJ=new Date(item.joined).getTime();
                                if(dateJ && startDate && dateJ<startDate || endDate && dateJ>endDate) return false;
                                return  item.name.toLowerCase().indexOf($('#searchByName').val().toLowerCase()) != -1;
                            });



                    refreshTable(Namefilter);

                }
        );

Answer 2

我编辑了小提琴。它没有工作的原因是因为双refreshTable()。第二个（日期过滤器）覆盖了第一个（名称过滤器）。如您所见，我将过滤器合并为一个。现在甚至可以将一个日期字段留空，并仅搜索结束日期或开始日期。

http://jsfiddle.net/KBMz4/1/

组合滤镜功能：

$('#searchButton').click(
    function()
        {
            var filtered = dateList.filter(
                function(item)
                {
                    return  (item.name == '' || item.name.toLowerCase().indexOf($('#searchByName').val().toLowerCase()) != -1) && 
                        ($('#dateFrom').val() =='' || item.joined >= $('#dateFrom').val()) &&
                        ($('#dateTo').val() == '' || item.joined <= $('#dateTo').val())
                });



            refreshTable(filtered); 
        }
);

JQuery - 按2个不同的来源搜索

2 个答案: