virtual Scroll list data and search

add lacks of elements of data to DOM

by Khadeer Mohammed

HTML

<h1>Virtual Scroll with search checkbox</h1>
<p><input type="text" class="virtualSearch"></p>
<p><input type="checkbox" class="checkAll" onchange="checkAll(this)"> Check All</p>
<div id="container"></div>


<script>

function checkedList(e,k,name){
		if($(e).is(':checked')){
    	arr[k].checked = true;
    } else {
    	arr[k].checked = false;
    }

    var arrChecked = arr.filter(function(obj){
    		return obj.checked == true;
    });
    
    if(arrChecked.length == arr.length){
    	$('.checkAll').prop('checked',true);
    } else {
    	$('.checkAll').prop('checked',false);
    }
    
    console.log('arr',arr);
}

function checkAll(e){
	if($(e).is(':checked')){
  	$('.checkItem').prop('checked',true);
    for(var k=0; k<arr.length; k++){
    	arr[k].checked = true;
    }
  } else {
  	$('.checkItem').prop('checked',false);
    for(var k=0; k<arr.length; k++){
    	arr[k].checked = false;
    }
  }
}

function names(e,k,name){
	$('.rowList').removeClass('active');
	$(e).closest('.rowList').addClass('active');
  for(var s=0; s<arr.length; s++){
  	arr[s].active = '';
    arr[k].active = 'active';
  }
  console.log('arr',arr);
}

var arr = [{"name":"Test 0","checked":false},{"name":"Test 1","checked":false},{"name":"Test 2","checked":false},{"name":"Test 3","checked":false},{"name":"Test 4","checked":false},{"name":"Test 5","checked":false},{"name":"Test 6","checked":false},{"name":"Test 7","checked":false},{"name":"Test 8","checked":false},{"name":"Test 9","checked":false},{"name":"Test 10","checked":false},{"name":"Test 11","checked":false},{"name":"Test 12","checked":false},{"name":"Test 13","checked":false},{"name":"Test 14","checked":false},{"name":"Test 15","checked":false},{"name":"Test 16","checked":false},{"name":"Test 17","checked":false},{"name":"Test 18","checked":false},{"name":"Test 19","checked":false},{"name":"Test 20","checked":false},{"name":"Test 21","checked":false},{"name":"Test 22","checked":false},{"name":"Test...

CSS

.rowList{
  	height:18px;
  	color:black;
  	width:100%;
    font-family:Arial;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: default;
    padding-top:2px;
    padding-bottom:2px;
  }
  .listName {
    cursor: pointer;
  }
  .rowList.active {
    background: #a1dcd9;
  }

JavaScript

virtualSearch(arr);

function virtualSearch(arr){
		/**
   * Creates a virtually-rendered scrollable list.
   * @param {object} config
   * @constructor
   */
  function VirtualList(config) {
  debugger
    var width = (config && config.w + 'px') || '100%';
    var height = (config && config.h + 'px') || '100%';
    var itemHeight = this.itemHeight = config.itemHeight;

    this.items = config.items;
    this.generatorFn = config.generatorFn;
    this.totalRows = config.totalRows || (config.items && config.items.length);

    var scroller = VirtualList.createScroller(itemHeight * this.totalRows);
    this.container = VirtualList.createContainer(width, height);
    this.container.appendChild(scroller);

    var screenItemsLen = Math.ceil(config.h / itemHeight);
    // Cache 4 times the number of items that fit in the container viewport
    this.cachedItemsLen = screenItemsLen * 3;
    this._renderChunk(this.container, 0);

    var self = this;
    var lastRepaintY;
    var maxBuffer = screenItemsLen * itemHeight;
    var lastScrolled = 0;

    // As soon as scrolling has stopped, this interval asynchronouslyremoves all
    // the nodes that are not used anymore
    this.rmNodeInterval = setInterval(function() {
      if (Date.now() - lastScrolled > 100) {
        var badNodes = document.querySelectorAll('[data-rm="1"]');
        for (var i = 0, l = badNodes.length; i < l; i++) {
          self.container.removeChild(badNodes[i]);
        }
      }
    }, 300);

    function onScroll(e) {
    //debugger
      e = e || window.event; //ie
      var te = e.target || e.srcElement; //ie
      var scrollTop = te.scrollTop; // Triggers reflow
      if (!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) {
        var first = parseInt(scrollTop / itemHeight) - screenItemsLen;
        self._renderChunk(self.container, first < 0 ? 0 : first);
        lastRepaintY = scrollTop;
      }

      lastScrolled = Date.now();
      e.preventDefault && e.preventDefault();
...