mitsuruog/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta name="description" content="RFP RxJSサンプル2 Github検索">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" class="q">
  <div class="loading"></div>
  <ul class="result">
  </ul>
<script id="jsbin-javascript">
var $result = $('.result');
var $loading = $('.loading');

var executingStream = new Rx.Subject();

var inputStream = Rx.Observable.fromEvent($('.q'), 'input')
  .map(function(e) {
    return e.target.value;
  });

var queryStream = inputStream
  .throttle(500)
  .filter(function(q) {
    return q.length > 0;
  })
  .distinctUntilChanged()
  .map(function(q) {
    return 'https://api.github.com/search/repositories?q=' + q;

  });

var repositoriesStream = queryStream
  .flatMap(function(url) {
    executingStream.onNext(true);
    return Rx.Observable.fromPromise($.ajax(url))
      .finally(function() {
        executingStream.onNext(false);
      });
  })
  .map(function(response) {
    return response.items;
  });

repositoriesStream.subscribe(function(repos) {
  var appendRepos = $.each(repos, function() {
    return $result.append('<li>' + this.full_name + '</li>');
  });
});

executingStream.subscribe(function(executing) {
  if(executing) {
    $loading.text('処理中...');
  } else {
    $loading.text('');
  }
});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"><\/script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta name="description" content="RFP RxJSサンプル2 Github検索">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" class="q">
  <div class="loading"></div>
  <ul class="result">
  </ul>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">var $result = $('.result');
var $loading = $('.loading');

var executingStream = new Rx.Subject();

var inputStream = Rx.Observable.fromEvent($('.q'), 'input')
  .map(function(e) {
    return e.target.value;
  });

var queryStream = inputStream
  .throttle(500)
  .filter(function(q) {
    return q.length > 0;
  })
  .distinctUntilChanged()
  .map(function(q) {
    return 'https://api.github.com/search/repositories?q=' + q;

  });

var repositoriesStream = queryStream
  .flatMap(function(url) {
    executingStream.onNext(true);
    return Rx.Observable.fromPromise($.ajax(url))
      .finally(function() {
        executingStream.onNext(false);
      });
  })
  .map(function(response) {
    return response.items;
  });

repositoriesStream.subscribe(function(repos) {
  var appendRepos = $.each(repos, function() {
    return $result.append('<li>' + this.full_name + '</li>');
  });
});

executingStream.subscribe(function(executing) {
  if(executing) {
    $loading.text('処理中...');
  } else {
    $loading.text('');
  }
});</script></body>
</html>

## jsbin.halopo.js
var $result = $('.result');
var $loading = $('.loading');

var executingStream = new Rx.Subject();

var inputStream = Rx.Observable.fromEvent($('.q'), 'input')
  .map(function(e) {
    return e.target.value;
  });

var queryStream = inputStream
  .throttle(500)
  .filter(function(q) {
    return q.length > 0;
  })
  .distinctUntilChanged()
  .map(function(q) {
    return 'https://api.github.com/search/repositories?q=' + q;

  });

var repositoriesStream = queryStream
  .flatMap(function(url) {
    executingStream.onNext(true);
    return Rx.Observable.fromPromise($.ajax(url))
      .finally(function() {
        executingStream.onNext(false);
      });
  })
  .map(function(response) {
    return response.items;
  });

repositoriesStream.subscribe(function(repos) {
  var appendRepos = $.each(repos, function() {
    return $result.append('<li>' + this.full_name + '</li>');
  });
});

executingStream.subscribe(function(executing) {
  if(executing) {
    $loading.text('処理中...');
  } else {
    $loading.text('');
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<meta name="description" content="RFP RxJSサンプル2 Github検索">
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<input type="text" class="q">
	<div class="loading"></div>
	<ul class="result">
	</ul>
	<script id="jsbin-javascript">
	var $result = $('.result');
	var $loading = $('.loading');

	var executingStream = new Rx.Subject();

	var inputStream = Rx.Observable.fromEvent($('.q'), 'input')
	.map(function(e) {
	return e.target.value;
	});

	var queryStream = inputStream
	.throttle(500)
	.filter(function(q) {
	return q.length > 0;
	})
	.distinctUntilChanged()
	.map(function(q) {
	return 'https://api.github.com/search/repositories?q=' + q;

	});

	var repositoriesStream = queryStream
	.flatMap(function(url) {
	executingStream.onNext(true);
	return Rx.Observable.fromPromise($.ajax(url))
	.finally(function() {
	executingStream.onNext(false);
	});
	})
	.map(function(response) {
	return response.items;
	});

	repositoriesStream.subscribe(function(repos) {
	var appendRepos = $.each(repos, function() {
	return $result.append('<li>' + this.full_name + '</li>');
	});
	});

	executingStream.subscribe(function(executing) {
	if(executing) {
	$loading.text('処理中...');
	} else {
	$loading.text('');
	}
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"><\/script>
	<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
	<meta name="description" content="RFP RxJSサンプル2 Github検索">
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<input type="text" class="q">
	<div class="loading"></div>
	<ul class="result">
	</ul>
	</body>
	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">var $result = $('.result');
	var $loading = $('.loading');

	var executingStream = new Rx.Subject();

	var inputStream = Rx.Observable.fromEvent($('.q'), 'input')
	.map(function(e) {
	return e.target.value;
	});

	var queryStream = inputStream
	.throttle(500)
	.filter(function(q) {
	return q.length > 0;
	})
	.distinctUntilChanged()
	.map(function(q) {
	return 'https://api.github.com/search/repositories?q=' + q;

	});

	var repositoriesStream = queryStream
	.flatMap(function(url) {
	executingStream.onNext(true);
	return Rx.Observable.fromPromise($.ajax(url))
	.finally(function() {
	executingStream.onNext(false);
	});
	})
	.map(function(response) {
	return response.items;
	});

	repositoriesStream.subscribe(function(repos) {
	var appendRepos = $.each(repos, function() {
	return $result.append('<li>' + this.full_name + '</li>');
	});
	});

	executingStream.subscribe(function(executing) {
	if(executing) {
	$loading.text('処理中...');
	} else {
	$loading.text('');
	}
	});</script></body>
	</html>