【问题标题】:HTML Table searching with list.js (search function) - modify to show all rows *not* including the search term使用 list.js(搜索功能)进行 HTML 表格搜索 - 修改以显示所有行*不*包括搜索词
【发布时间】:2015-12-24 01:06:08
【问题描述】:

我正在使用 List.js 搜索功能来搜索一个 html 表格,它工作正常。我想做的是使用搜索功能来搜索所有包含关键字的行。

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

web pages by fred
web pages by smith
freds web pages 

它只会返回“smith 的网页”。

需要如何修改代码才能做到这一点?

这是有问题的代码:

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;
};

【问题讨论】:

  • 你能为你的问题设置一个 jsfiddle 吗?这样我就可以把你的小提琴改成你想要的。
  • 我无法为这个问题设置 jsfiddle,因为数据来自其他来源。我唯一能做的就是把没那么有用的 search.js 粘贴到那里。
  • 好的,希望其他人可以帮助您,或者摆弄一些虚拟数据。

标签: javascript php html sorting html-table


【解决方案1】:

我通过调整 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'这两个参数颠倒了

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-03-14
    • 2013-07-06
    • 1970-01-01
    • 1970-01-01
    • 2019-08-04
    • 2020-03-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多