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

Creating search bar to filter array into table

本文关键字：过滤数组搜索栏创建更新时间：2023-09-26

我试图使用搜索栏过滤值到表中。如果数组中的任何值与搜索栏中的值匹配那么将它们显示到表格中。

I want it so:

如果你搜索"A"，当匹配"A"时，你会得到数组中的所有值。例:只有当名字和姓氏中包含"A"时才显示宾语;显示名称:亚当,不显示名称:伊甸园)
如果你搜索"AD(连续)"，你会得到数组中包括"A"answers"D"的所有值。例:只有当名字和姓氏包含"A"answers"D"时才显示宾语;显示名称:亚当,不显示名称:伊甸园)

然而，每次我进行实时搜索时，我都会遇到表中重复的值。所以如果我有"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小提琴示例:https://jsfiddle.net/kng44rp9/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);
}

演示