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

时间:2015-08-06 14:16:23

标签: javascript jquery html filter

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

我希望如此:

  • 如果您搜索“A”,则在匹配“A”时您将获得Array中的所有值。例如。 (仅当名字和姓氏包含“A”时显示对象; 显示名称:亚当,不显示姓名:伊甸园)
  • 如果搜索“AD(连续)”,您将获得Array中包含“A”和“D”的所有值。例如。 (仅当名字和姓氏包括“A”和“D”时才显示对象; 显示名称:亚当,不显示姓名:伊甸园)

然而,每次我进行实时搜索时,我都会遇到表中的值重复。所以如果我有“亚当”,我会搜索“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/

有人可以查看我当前的代码并尝试指出我该做什么的正确方向吗?

1 个答案:

答案 0 :(得分:1)

因为您在函数之外创建了数组,所以无论何时在执行新过滤器时都按下它,旧条目仍然在数组中。

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

{{1}}

DEMO