外部ライブラリを使わず値の絞り込み

参考

• https://kuroeveryday.blogspot.com/2016/03/incremental-search.html

ソース

• http://localhost/?k=lemon

のようにkの値で絞り込む

<h2>過去配信の動画ページ</h2>

配信第 <input id="keyword" type="text" /> 回
<ul id="list"></ul>

<script>
	var keyupStack = [];
	var keyword = document.getElementById('keyword');
	keyword.addEventListener('keyup', function () {
	  keyupStack.push(1);

	  setTimeout(function () {
	    keyupStack.pop();
	    // 最後にkeyupされてから一定時間次の入力がなかったら実行
	    if (keyupStack.length === 0) {
	      // 部分一致を可能にする(例: .*a.*b.*c.*)
	      var buf = '.*' + this.value.replace(/(.)/g, "$1.*");
	      var reg = new RegExp(buf);
	      
	      var filteredLists = data.filter(function (d) {
	       return reg.test(d);
	      });
	      createRow(filteredLists);
	    }
	  }.bind(this), 300);
	});

	var createRow = function (lists) {
	  var list = document.getElementById('list');
	  list.textContent = null;
	  lists.forEach(function (l) {
	    var li = document.createElement('li');
	    li.appendChild(document.createTextNode(l));
	    list.appendChild(li);
	  });
	};

  
  
window.addEventListener("load", function() {
	// 初期表示
	createRow(data);
  
	// URLを取得
	let url = new URL(window.location.href);
	// URLSearchParamsオブジェクトを取得
	let params = url.searchParams;
	// getメソッド
	if (params.get('k') != null) {
		document.getElementById('keyword').value = params.get('k');
      	  // 部分一致を可能にする(例: .*a.*b.*c.*)
	      var buf = '.*' + params.get('k').replace(/(.)/g, "$1.*");
	      var reg = new RegExp(buf);
	      
	      var filteredLists = data.filter(function (d) {
	       return reg.test(d);
	      });
	      createRow(filteredLists);
	}
    document.getElementById("keyword").focus();
});
  
  
	var data = ['apple','apricot','avocado','banana','bilberry','blackberry','blackcurrant','blueberry','boysenberry','cantaloupe','currant','cherry','cherimoya','cloudberry','coconut','cranberry','damson','date','dragonfruit','durian','elderberry','feijoa','fig','goji berry','gooseberry','grape','raisin','grapefruit','guava','huckleberry','jabuticaba','jackfruit','jambul','jujube','juniper berry','kiwi fruit','kumquat','lemon','lime','loquat','lychee','mango','marion berry','melon','cantaloupe','honeydew','watermelon','miracle fruit','mulberry','nectarine','olive','orange','blood orange','clementine','mandarine','tangerine','papaya','passionfruit','peach','pear','persimmon','physalis','plum/prune','pineapple','pomegranate','pomelo','purple mangosteen','quince','raspberry','salmonberry','rambutan','redcurrant','salal berry','salak','satsuma','star fruit','strawberry','tamarillo','tamarind','ugli fruit'];
  
</script>