hachibeeDI/rx-demo.html

## rx-demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rxデモ</title>

    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <input id="query-field" type="text" name="user">

    <!-- {{{ -->
    <ul>
      <li class="query-target">aaa</li>
      <li class="query-target">bbb</li>
      <li class="query-target">zzz</li>
      <li class="query-target">abc</li>
    </ul>
    <!-- }}} -->

    <!-- script -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.5/rx.all.min.js" async></script>
    <script type="text/javascript">
var _turnObjToArray = function(obj) {
  return [].map.call(obj, function(element) {
    return element;
  })
};


var main = function main() {
  var query_field = document.getElementById('query-field');
  var query_targets = _turnObjToArray(document.querySelectorAll('.query-target'));
  var unhideAllTargets = function unhideAllTargets() {
    query_targets.map(function(node) { node.classList.remove('hidden'); });
  };
  var hideTarget = function hideTarget(node) { node.classList.add('hidden'); };

  var query_field_observer = Rx.Observable.fromEvent(query_field, 'keyup');
  query_field_observer
    .map(function(e) { return e.target.value; })
    .throttle(300)
    .distinctUntilChanged()
    .filter(function(txt) {
      if (txt.length == 0) { unhideAllTargets(); }
      return txt.length >= 2;
    })
    .subscribe(function(txt) {
      var matcher = new RegExp(".*" + txt + ".*");
      query_targets
        .filter(function(node) { return ! node.textContent.match(matcher); })
        .map(hideTarget);
    });
};

window.addEventListener('load', main);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Rxデモ</title>

	<style>
	.hidden {
	display: none;
	}
	</style>
	</head>
	<body>
	<input id="query-field" type="text" name="user">

	<!-- {{{ -->
	<ul>
	<li class="query-target">aaa</li>
	<li class="query-target">bbb</li>
	<li class="query-target">zzz</li>
	<li class="query-target">abc</li>
	</ul>
	<!-- }}} -->

	<!-- script -->
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.5/rx.all.min.js" async></script>
	<script type="text/javascript">
	var _turnObjToArray = function(obj) {
	return [].map.call(obj, function(element) {
	return element;
	})
	};


	var main = function main() {
	var query_field = document.getElementById('query-field');
	var query_targets = _turnObjToArray(document.querySelectorAll('.query-target'));
	var unhideAllTargets = function unhideAllTargets() {
	query_targets.map(function(node) { node.classList.remove('hidden'); });
	};
	var hideTarget = function hideTarget(node) { node.classList.add('hidden'); };

	var query_field_observer = Rx.Observable.fromEvent(query_field, 'keyup');
	query_field_observer
	.map(function(e) { return e.target.value; })
	.throttle(300)
	.distinctUntilChanged()
	.filter(function(txt) {
	if (txt.length == 0) { unhideAllTargets(); }
	return txt.length >= 2;
	})
	.subscribe(function(txt) {
	var matcher = new RegExp("." + txt + ".");
	query_targets
	.filter(function(node) { return ! node.textContent.match(matcher); })
	.map(hideTarget);
	});
	};

	window.addEventListener('load', main);
	</script>
	</body>
	</html>