我在搜索对象并使用Javascript的indexOf（）函数在表上显示结果时遇到麻烦

Question

我的JavaScript不好，因为我仍在尝试学习。 我一直在尝试用搜索结果填充表格，但是经过几次尝试之后，目前看来我无法做。 我想搜索一个对象以获取用户数据。

例如，如果我通过事件生成/动态文本框搜索“ foo”，由于firstName中包含“ foo”，因此我将获得所有结果的整个结果集。 不管哪个领域。 如果我搜索“ foobar”，我将仅获得第一个对象，因为其电子邮件值中包含“ foobar”。 我该如何实施？

我有一个对象存储在具有3个具有属性的对象的变量中

var usersList =[
    {
        "firstName": "foo",
        "lastName": "bar",
        "email": "foobar@gmail.com",
        "password": "12345",
        "userLevel": "Admin", // manager
        "seatId": "PIC3FA1-3",
        "localNumber": "777-78-90",
        "projects": "Delta, Google"
    },
    {
        "firstName": "foot",
        "lastName": "barn",
        "email": "footbarn@gmail.com",
        "password": "12345",
        "userLevel": "Manager", // manager
        "seatId": "PIC3FA1-1",
        "localNumber": "777-66-12",
        "projects": "Kokey, Cathay"
    },
    {
        "firstName": "food",
        "lastName": "bard",
        "email": "foodbard@gmail.com",
        "password": "12345",
        "userLevel": "user", // manager
        "seatId": "PIC3FA1-21",
        "localNumber": "777-78-90",
        "projects": "Kokey, Cathay"
    }
];

$(".section-dashboard").on('click','.search-column>a', function() {
    var input = $(".search-column>input[type='text']").val();
    var result = search(input, usersList);

    for(var key in result) {
        $(".search-column>table>tbody").append('<tr>'
                +'    <td>'+users[key].firstName+' '+users[key].lastName+'</th>'
                +'    <td>'+users[key].seatId+'</th>'
                +'    <td>'+users[key].localNumber+'</th>'
                +'    <td>'+users[key].projects+'</th>'
                +'</tr>');
    }    
});

function search(input, users) {
    var results = [];

    for(var i=0; i<users.length; i++) {
      for(key in users[i]) {
        if(users[i][key].indexOf(input)!=-1) {
          results.push(users[i]);
        }
      }
    }

    return results;
}

搜索结果输出的是正确的， 但通常根本不像搜索查询。

追加似乎可以很好地添加新表行，但是当重新搜索时如何使以前的结果消失呢？

Answer 1

您没有将search()的输出分配给任何东西，因此result保持为空。

var result = [];
search(input, usersList);

应该

var result = search(input, usersList);

Answer 2

为了在添加新行之前删除先前的行，您需要按以下步骤清空表：

$(".section-dashboard").on('click','.search-column>a', function() {
    var input = $(".search-column>input[type='text']").val();
    var result = search(input, usersList);

    // add this line. This empties the table before adding new rows.
    $(".search-column>table>tbody .new_data").remove()

    for(var key in result) {
        $(".search-column>table>tbody").append('<tr class="new_data">'
                +'    <td>'+users[key].firstName+' '+users[key].lastName+'</th>'
                +'    <td>'+users[key].seatId+'</th>'
                +'    <td>'+users[key].localNumber+'</th>'
                +'    <td>'+users[key].projects+'</th>'
                +'</tr>');
    }    
});

编辑：您可以在新填充的行上设置一个类，以将它们定位为目标，而以后再将其删除。

Answer 3

我改为这样做。 现在工作正常。 我只是将所有indexOf放在if语句中，并且现在工作正常，只是想知道我是否可以改善此代码

$(".section-dashboard").on('input','.search-column>input[type="text"]', function() {
    var input = $(this).val().toLowerCase();
    var fullname = "";

    $(".search-column>table>tbody").html(
                      '<tr>'
    +'                    <th>Fullname</th>'
    +'                    <th>Seat ID</th>'
    +'                    <th>Projects</th>'
    +'                    <th>Local Number</th>'
    +'                </tr>');

    $(".search-column>p").hide();

    for(var key in usersList) {
        // Full name
        fullname = usersList[key].firstName.toLowerCase() +' '+usersList[key].lastName.toLowerCase();

        // Check if any of the fields has a substring of the user input
        if((fullname.indexOf(input) > -1 || usersList[key].firstName.toLowerCase().indexOf(input) > -1 || usersList[key].lastName.toLowerCase().indexOf(input) > -1 || usersList[key].seatId.toLowerCase().indexOf(input) > -1 || usersList[key].localNumber.toLowerCase().indexOf(input) > -1 || usersList[key].projects.toLowerCase().indexOf(input) > -1) && input) {
           $(".search-column>table>tbody").append('<tr>'
        +'    <td>'+usersList[key].firstName+' '+usersList[key].lastName+'</th>'
        +'    <td>'+usersList[key].seatId+'</th>'
        +'    <td>'+usersList[key].localNumber+'</th>'
        +'    <td>'+usersList[key].projects+'</th>'
        +'</tr>');
        }
    }   
});