javascript - 创建搜索栏以将数组过滤到表中

Question

我正在尝试使用搜索栏将值过滤到表中。因此，如果数组中的任何值与搜索栏中的值匹配，则将它们显示到表中。

我想要这样:

• 如果您搜索“A”，您将在匹配“A”时获得数组中的所有值。例如。 (仅当名字和姓氏包含“A”时才显示对象；显示名称: Adam，不显示名称: Eden)
• 如果您搜索“AD(连续)”，您将获得数组中的所有值，其中包括“A”和“D”。例如。 (仅当名字和姓氏包含“A”和“D”时才显示对象；显示名称: Adam，不显示名称: Eden)

但是，每次进行实时搜索时，我都会遇到表中的值重复的情况。所以如果我有“Adam”，我会搜索“A”然后搜索“AD”，他应该在表中搜索两次。

当前代码:

// Stored Patient List
var storedPatientList = new Array();

// Variables for limiting Patients on show
var patientsToShow = 15;

// On page select initialize functions
$(document).ready(function ()
{
    // Get latest patient list
    GetPatientListData();

    $("#patientListSearch").on("keyup keypress", function() 
    {
        FilterPatientListBasedOnLiveSearch($("#patientListSearch").val());
    });
});

// Get all patient information for patient list, and append to patient list table (Patient List page)
function GetPatientListData()
{

    $.post("php/getPatientList.php",
    {
        command: "getAllPatientsList"
    })

    .success(function (data)
    {
        // Store patient list so you don't have to keep on reloading list
        storedPatientList = JSON.parse(data); 
        $(".patientListHiddenNotice").css("display", "none");
    });
}

function FilterPatientListBasedOnLiveSearch(filter) 
{

    // Create a new array to store the Patients at multiple points
    var originalPatientList = new Array();
    var newPatientList = new Array();
    var tableRecord = '';

    originalPatientList = storedPatientList;

    if (filter)
    {
        if (originalPatientList.RESPONSE == "OK")
        {

            // If so, loop through the old Patient list
            for(var i = 0; i < originalPatientList.RECORDS.length; i++)
            {
                var currentRecord = originalPatientList.RECORDS[i];
                // Check if the filter matches the Patient being checked
                if((currentRecord["patientFirstname"] + " " + currentRecord["patientSurname"]).toLowerCase().indexOf(filter.toLowerCase()) != -1)
                {
                    // If so, push the Patient into the new list
                    trustArray.push("<tr id=" + currentRecord["PatientID"] + "><td class='patientListNames'>" + currentRecord["patientFirstname"] + " " + currentRecord["patientSurname"] + "</td><td>" + currentRecord["patientNHSID"] + "</td></tr>");                
                }
            }
            tableRecord = trustArray;
        }
    }

    $('#dataTables-example').find('tbody').html(tableRecord);
}

对象的外观:

Object {PatientID: "1438684398979xWug5A6Y", Registered: "1438684398982", patientType: "mother", patientFirstname: "Georgina", patientSurname: "Whitaker"…}
Object {PatientID: "1438684464931cv4wTysi", Registered: "1438684464932", patientType: "baby", patientFirstname: "Baby Boy", patientSurname: "Whitaker"…}
Object {PatientID: "1438684572193rttTQY4N", Registered: "1438684572194", patientType: "mother", patientFirstname: "June", patientSurname: "Rayfield"…}
Object {PatientID: "14386846626984c1HzsCa", Registered: "1438684662699", patientType: "baby", patientFirstname: "Eva", patientSurname: "Rayfield"…}
Object {PatientID: "1438684871330rM0qgjJf", Registered: "1438684871332", patientType: "mother", patientFirstname: "Fiona", patientSurname: "Smith"…}

JS fiddle 示例: https://jsfiddle.net/kng44rp9/1/

有人可以看看我当前的代码并尝试为我指出正确的方向吗？

Answer 1

因为您是在函数外部创建数组，所以每当您在执行新过滤器时推送该数组时，旧条目仍然在数组中。

这里有一个更简单的解决方案，使用 Array.prototype.map()每次进行搜索时都会创建一个新数组

function FilterPatientListBasedOnLiveSearch(filterVal) {

    // Create a new array to store the Patients at multiple points

    filterVal = filterVal.toLowerCase();
    var trustArray = PatientList.map(function (patient) {
        // return patient if search is empty or last name matches
        if (!filterVal || patient.patientSurname.toLowerCase().indexOf(filterVal) !== -1) {
            return "<tr id=" + patient.PatientID + "><td class='patientListNames'>" + patient.patientFirstname + " " + patient.patientSurname + "</td></tr>"
        }

    });

    $('#dataTables-example').find('tbody').html(trustArray);
}

DEMO