Создание панели поиска для фильтрации массива в таблицу

Question

Я пытаюсь использовать панель поиска для фильтрации значений в таблице. Поэтому, если любое из значений в массиве соответствует значению в строке поиска, тогда отобразите их в таблицу.

Я хочу, чтобы это так:

• Если вы искали «А» вы получите все значения в массиве, когда матч «A». Например. (Показывать только объект, если имя и фамилия включено «A»; Показать имя: Адам, Не показывать название: Eden)
• Если вы искали «AD (подряд)» вы получите все значения в массиве, которые включают «A» и «D». Например. (Показывать только объект, если имя и фамилия включено «A» и «D»; Показать имя: Адам, Не показывать имя: Eden)

Однако каждый раз, когда я живой search, я испытываю, что значения дублируются в таблице. Итак, если бы у меня был «Адам», я бы поискал «А», а затем искал «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/

Может кто-нибудь взглянуть на мой текущий код и попробуйте указать мне в правильном направлении, что делать?

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