Question

我有一个数组，它的数据放在一个表上。有3个搜索字段和一个按钮。

不知何故搜索不起作用。请看下面的代码，我想知道我在这里缺少什么。

HTML

Search by ID<input type="text" id="searchByID" maxlength="11" >
<br>Search by Name
        <input type="text" id="searchByName">

    <br>Search by Date From:
    <input type="text" id="dateFrom" class="datepicker">    To: <input type="text" id="dateTo" class="datepicker">
        <br>
        <button type="button" id="searchButton" class="buttClick">SEARCH</button>
            <p></p>
<table id="mytable" width="90%" border="1" bordercolor="#ccc" class="fltLt">
</table>

JS

$(function() {
    $( ".datepicker" ).datepicker();
  });
$(document).ready(
    function()
        {
var members = [
    {
        name: "Keely Luther",
        id  : "1235-454676",
        joined: "01/16/2014"
    },
    {
        name: "Mike Jenson",
        id  : "1235-478948",
        joined: "05/23/2014"
    },
    {
        name: "Sharon Lee",
        id  : "1235-234532",
        joined: "04/15/2013"
    }
];

members.sort(function (a, b) {
    return a.name.split(' ')[1] > b.name.split(' ')[1];
});


    $("#searchByID").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && e.which != 45 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   }); //end searchByID").keypress



    $('#searchButton').click(
        function()
            {
                var filtered = members.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()) &&
                            ($('#searchByID').val() == '' || item.id == $('#searchByID').val())
                    });



                refreshTable(filtered); 

            }); //end click 


            function refreshTable(list) 
                {
                    $("#mytable").html("<tr><td>NAME</td><td>ID</td><td>JOINS</td>");
                    for (var i = 0; i < list.length; i++)
                        {
                            var tr="<tr>";
                            var td1="<td class='PL10'>"     +list[i]["name"]+"</td>";                                                          
                            var td2="<td class='txtCenter'>"+list[i]["id"]+"</td>";
                            var td3="<td class='txtCenter'>"+list[i]["joined"]+"</td></tr>";

                           $("#mytable").append(tr+td1+td2+td3);

                        }
                    if(list.length==0)
                        {
                            $('#mytable').html("<span id='errmsg'>No Data Found</span>");
                        }
                }

            refreshTable(members);

        });//end ready

Answer 1

你的功能按预期工作..你的问题是你的线路中断了 'return'声明破坏了代码..

working fiddle

我所做的只是把你的退货声明放在一行：

return (item.name == '' || item.name.toLowerCase().indexOf($('#searchByName').val().toLowerCase()) != -1) && ($('#dateFrom').val() =='' || item.joined >= $('#dateFrom').val()) && ($('#dateTo').val() == '' || item.joined <= $('#dateTo').val()) && ($('#searchByID').val() == '' || item.id == $('#searchByID').val())

它有效！

JQuery搜索字段

1 个答案: