javascript+css实时过滤单词的表格

使用方法

console.clear();

(function() {

var list = [],
    filteredList = [],
    maxDisplayLimit = 10,
    textInput = document.querySelector('.text-filter'),
    displayList = document.querySelector('.list'),
    countMessage = document.querySelector('.count-message');

function generateDummyList(itemCount) {
  if (!itemCount) return;
  for (var i = 0; i < itemCount; i++) {
    var item = {
      name: Math.random().toString(36).substr(2, 10),
      type: Math.random().toString(36).substr(2, 10),
      category: Math.random().toString(36).substr(2, 10)
    };
    list.push(item);
  }
}

function generateCountMessage() {
  var msg = '',
      matches = filteredList.length;
  switch (true) {
    case (matches === 0):
      msg = '暂无数据！';
      break;
    case (matches === 1):
      msg = '显示 1 条数据';
      break;
    case (matches <= maxDisplayLimit):
      msg = '显示 ' + filteredList.length + ' 条数据';
      break;
    default:
      msg = '显示 ' + maxDisplayLimit + ' 一共 ' + matches + ' 条数据';
  }
  countMessage.textContent = msg;
}
  
function generateListItem(item) {
    var li = document.createElement('li'),
          spanName = document.createElement('span'),
          spanType = document.createElement('span'),
          spanCategory = document.createElement('span');
      spanName.classList.add('name');
      spanType.classList.add('type');
      spanCategory.classList.add('category');
      spanName.textContent = item.name;
      spanType.textContent = item.type;
      spanCategory.textContent = item.category;
      li.appendChild(spanName);
      li.appendChild(spanType);
      li.appendChild(spanCategory); 
  return li;
}

function generateList() {
  var frag = document.createDocumentFragment();
  for (var i = 0; i < filteredList.length; i++) {
    if (i < maxDisplayLimit) {
      var item = filteredList[i],
          li = generateListItem(item);
      frag.appendChild(li);
    }
    else break;
  }
  displayList.innerHTML = '';
  displayList.appendChild(frag);
  generateCountMessage();
}

function textMatch(item) {
  var searchTerm = textInput.value.toLowerCase(),
      itemText = (item.name + item.type + item.category).toLowerCase();
  return itemText.indexOf(searchTerm) !== -1;
}

function getFilteredItems() {
  filteredList = list.filter(textMatch);
  generateList();
}

textInput.addEventListener('keyup', getFilteredItems);

generateDummyList(100000);
getFilteredItems();

})();