使用list.js进行HTML表格搜索(搜索功能) - 修改以显示所有行*不包括搜索词

时间:2015-09-26 08:13:46

标签: javascript php html sorting html-table

我使用List.js搜索功能来搜索html表,这样可以正常工作。我想要做的是使用搜索功能搜索 don 包含关键字的所有行。

例如:如果我有一些我想要搜索的关键字:

web pages by fred
web pages by smith
freds web pages 

它将返回史密斯的网页'仅

如何修改代码才能执行此操作?

这是有问题的代码:

var events = require('events'),
  getByClass = require('get-by-class'),
  toString = require('to-string');

module.exports = function(list) {
  var item,
    text,
    columns,
    searchString,
    customSearch;

  var prepare = {
    resetList: function() {
      list.i = 1;
      list.templater.clear();
      customSearch = undefined;
    },
    setOptions: function(args) {
      if (args.length == 2 && args[1] instanceof Array) {
        columns = args[1];
      } else if (args.length == 2 && typeof(args[1]) == "function") {
        customSearch = args[1];
      } else if (args.length == 3) {
        columns = args[1];
        customSearch = args[2];
      }
    },
    setColumns: function() {
      columns = (columns === undefined) ? list.valueNames : columns;
    },
    setSearchString: function(s) {
      s = toString(s).toLowerCase();
      s = s.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&"); // Escape regular expression characters
      searchString = s;
    },
    toArray: function(values) {
      var tmpColumn = [];
      for (var name in values) {
        tmpColumn.push(name);
      }
      return tmpColumn;
    }
  };
  var search = {
    list: function() {
      for (var k = 0, kl = list.items.length; k < kl; k++) {
        search.item(list.items[k]);
      }
    },
    item: function(item) {
      item.found = false;
      for (var j = 0, jl = columns.length; j < jl; j++) {
        if (search.values(item.values(), columns[j])) {
          item.found = true;
          return;
        }
      }
    },
    values: function(values, column) {
      if (values.hasOwnProperty(column)) {
        text = toString(values[column]).toLowerCase();
        if ((searchString !== "") && (text.search(searchString) > -1)) {
          return true;
        }
      }
      return false;
    },
    reset: function() {
      list.reset.search();
      list.searched = false;
    }
  };

  var searchMethod = function(str) {
    list.trigger('searchStart');

    prepare.resetList();
    prepare.setSearchString(str);
    prepare.setOptions(arguments); // str, cols|searchFunction, searchFunction
    prepare.setColumns();

    if (searchString === "" ) {
      search.reset();
    } else {
      list.searched = true;
      if (customSearch) {
        customSearch(searchString, columns);
      } else {
        search.list();
      }
    }

    list.update();
    list.trigger('searchComplete');
    return list.visibleItems;
  };

  list.handlers.searchStart = list.handlers.searchStart || [];
  list.handlers.searchComplete = list.handlers.searchComplete || [];

  events.bind(getByClass(list.listContainer, list.searchClass), 'keyup', function(e) {
    var target = e.target || e.srcElement, // IE have srcElement
      alreadyCleared = (target.value === "" && !list.searched);
    if (!alreadyCleared) { // If oninput already have resetted the list, do nothing
      searchMethod(target.value);
    }
  });

  // Used to detect click on HTML5 clear button
  events.bind(getByClass(list.listContainer, list.searchClass), 'input', function(e) {
    var target = e.target || e.srcElement;
    if (target.value === "") {
      searchMethod('');
    }
  });

  list.helpers.toString = toString;
  return searchMethod;
};

1 个答案:

答案 0 :(得分:0)

我通过调整list.js代码

解决了这个问题
    item: function(item) {
        item.found = true;
        for (var j = 0, jl = columns.length; j < jl; j++) {
            if (search.values(item.values(), columns[j])) {
                item.found = false;
                return;
            }
        }

我颠倒了两个参数'item.found = true'和'item.found = false'