Пользовательский фильтр-нокаут js observableArray

Question

У меня есть наблюдаемый массив с тестами тестов, которые я хочу фильтровать в соответствии с текстом в поле поиска. Обновление фильтрации происходит после каждого нажатия клавиши, поэтому я ищу наиболее эффективный метод.

Проверить этот JS-скрипку упрощенной версии моей проблемы:

http://jsfiddle.net/LkqTU/23180/

Ниже вы можете увидеть фрагмент из скрипки. На данный момент фильтрация берет весь текст в поле поиска и проверяет поле «Имя» каждого теста на него.

Что я хочу? - это разделить текст фильтра на слова и искать каждое поле в testuite для каждого слова в поле поиска.

Я вам, например, пишу «user lol» в поле поиска, я хочу, чтобы он возвращал только теги testuite, которые содержат эти слова в любом поле (здесь два из этих тестов имеют «пользователь» в имени, lol "в описании).

self.filteredTestsuites = ko.computed(function() { 

    // If many white spaces in a row, replace with only one white space 
    fText = self.filterText().replace(/\s+/g, ' '); 

    // If there is anything in the search box, filter for this 
    // As of now this does not divide the filterText and only searches the Name field 
    var filteredCollection = ko.utils.arrayFilter(self.testsuites(), function(test) { 
     if(fText.length) 
      return (test.name.toUpperCase().indexOf(fText.toUpperCase()) >= 0); 
     else 
      return 1; 
    }); 

    return filteredCollection; 
}, self); 

Мой вопрос как я могу сделать наиболее эффективным ищущий? Возможное решение заключается в том, что для каждого слова в поле поиска я ищу каждое поле в текущем testuite. Однако я хотел бы получить более общее решение, где мне не нужно указывать поля (например, имя, описание и т. Д.), И я также не уверен в эффективности этого метода.

Предложения?

Answer 1

Простым решением, которое ранее использовалось ive, является объединение всех ключей/текстовых ключей с возможностью поиска в один длинный текст с возможностью поиска и использование этого для выполнения всех ваших поисков.

Ниже представлена ​​небольшая упрощенная версия.

http://jsfiddle.net/rainerpl/v2krqev5/2/

function ViewModel(){ 
    var self = this, x, i, suits; 

    self.filterText = ko.observable(""); // Text from search field 

    // Collection of testsuites 
    self.testsuites = ko.observableArray([ 
     { name: "Register User", description: "Bla bla bla", etc: "Many more fields..." }, 
     { name: "Delete User", description: "some description", etc: "Many more fields" }, 
     { name: "Send Money", description: "na-na-na bat man", etc: "Many more fields" } 
    ]); 
    suits = self.testsuites(); 

    for (i = 0; i < suits.length; i++) { 
     suits[i]["search_content"] = ">"; 
     for (x in suits[i]) { 
      if (!suits[i].hasOwnProperty(x) || x == "search_content" || typeof suits[i][x] !== "string") {continue;} 
      suits[i]["search_content"] += suits[i][x].toUpperCase(); 
     } 
    } 
    // Collection of testsuites after going through search filter 
    self.filteredTestsuites = ko.computed(function() { 
     var reg; 
     // If many white spaces in a row, replace with only one white space 
     fText = self.filterText().replace(/\s+/gi, '|'); 
     fText = fText.replace(/\|\s*$/gi, ''); 
     console.log("regex:", fText); 
     reg = new RegExp(fText, "gi"); 
     // If there is anything in the search box, filter for this 
     // As of now this does not divide the filterText and only searches the Name field 
     var filteredCollection = ko.utils.arrayFilter(self.testsuites(), function(test) { 
      if(fText.length) 
       return test.search_content.match(reg); 
      else 
       return 1; 
     }); 

     return filteredCollection; 
    }, self); 

} 

$(document).ready(function(){ 
    var vm = new ViewModel(); 
    ko.applyBindings(vm); 
}); 

Answer 2

Я добавил DataTables JQuery плагин из https://datatables.net/ в связанном скрипкой, используя CDN https://cdn.datatables.net/ и добавил одну строку в JavaScript, и добавил идентификатор «theDataTable» на свой <table> элемент, чтобы показать, что вы можете делать с DataTables.

$('#theDataTable').dataTable(); 

http://jsfiddle.net/LkqTU/23185/

Существует гораздо больше настроек, которые вы можете сделать, но этот простой пример показывает, как легко использовать его, чтобы включить поиск, сортировку и фильтрацию всех полей в таблице ,