Question

我不擅长使用javascript，因为我仍在努力学习它。我一直试图用搜索结果填充一张桌子，但是经过几次尝试后我似乎无法做到这一点。我想搜索一个对象来获取用户数据。

例如，如果我搜索＆＃34; foo＆＃34;通过事件生成/动态文本框，我将获得所有这些文件的整个结果集，因为firstName有＆＃34; foo＆＃34;在里面。哪个领域并不重要。如果我搜索＆＃34; foobar＆＃34;，我只会得到第一个对象，因为它的电子邮件值为＆＃34; foobar＆＃34; substing。我该如何实现呢？

我有一个对象存储在一个带有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>');
        }
    }   
});

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

3 个答案: