javascript - 过滤字符串的一部分

Question

我有一个数组，它的数据显示在表格上。 Live Code

按日期或按名称过滤效果很好。

1. 我编写了更多代码，以便在用户输入不在列表中的名称时显示“未找到数据”，但不知何故它不起作用。

2. 有没有办法编写一段代码，如果用户仅输入姓氏或名字，则显示与列表中的姓氏或名字相匹配的结果？

请伸出援手。谢谢!

HTML

<p>From: <input class="datepicker" id="dateFrom" type="text"> To: <input class="datepicker" id="dateTo" type="text"><button  class="buttApply">APPLY</button></p>
 
    Search by Name<input type="text" id="searchByName"><button type="button"  id="byNamebutton">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"
    }
    ];

    $('#byNamebutton').click(
        function()
            {
                var Namefilter = dateList.filter(function(NameItem)
                    {
                      if(NameItem.name == $('#searchByName').val())
                        {
                            return  NameItem.name == $('#searchByName').val();
                        }
                      else
                        {
                            $('#mytable').append('No data found!');
                        }
                     });
                
                refreshTable(Namefilter); 
            }
    );

        $('.buttApply').click(
            function()
            {   
                var filtered = dateList.filter(function(item){
                    return item.joined >= $('#dateFrom').val() && item.joined <= $('#dateTo').val();
                });
                
                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);
        }
    }
    
    refreshTable(dateList);

Answer 1

如果您希望通过包含短语并忽略区分大小写来按名称进行搜索:

return  NameItem.name.toLowerCase().indexOf($('#searchByName').val().toLowerCase()) != -1;

至于没有找到数据，您只需将其包含在 reFreshTable 函数的末尾即可:

    if(list.length==0){
         $('#myTable').html("No Data Found");
    }

JSFiddle:https://jsfiddle.net/juvian/WWscZ/9/

如果您的数据不是很大，我还建议将 $('#byNamebutton').click( 更改为 $('#searchByName').keyup( 使其响应更快，因为它会在您键入时进行过滤