JQuery Search Fields

Question

I have an array and its data is placed on a table. There are 3 fields for searching and a button.

Somehow the searching doesn't work. Please take a look at the code below and I am wondering what I am missing here.

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

Are you trying to only show items that match name **and** both dates **and** ID? Because that is what you large conditional is now doing. — Frank van Puffelen, Sep 07 '14 at 13:55
but for each condition he passes them on empty string right? — webkit, Sep 07 '14 at 13:56
_@ Frank van Puffelen, the search can be for 1 field and leave the others blank. Or we can search all 3 fields. The code looks right, but somehow it doesn't work! — abcid d, Sep 07 '14 at 14:07

score 0 · Accepted Answer · answered Sep 07 '14 at 14:07

0

Your function works as intended.. your problem was that you had line breaks in your 'return' statement which broke the code..

working fiddle

all I did was put your return statement all on one line:

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())

and it works!

answered Sep 07 '14 at 14:07

webkit

3,349
1
16
18

_@ webkit, Thank you so much! Yes, I DID break this into a new line for easy to take a look and I thought space doesn't matter in JS, but that causes a problem! Thank you again!!! – abcid d Sep 07 '14 at 14:12
@abcidd no problem..! return statements are an exception in that regard.. you can read the correct answer to this -> http://stackoverflow.com/questions/8528557/why-doesnt-a-javascript-return-statement-work-when-the-return-value-is-on-a-new – webkit Sep 07 '14 at 14:17
@@ webkit, Thank you again for the link! This is very helpful! – abcid d Sep 07 '14 at 14:30

JQuery Search Fields

1 Answers1