HenriqueLimas/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="col-12">
    <div class="autcomplete">
      <span class="autocomplete-selection" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="-1">
        <ul class="autocomplete-selection__list">
          <li class="autocomplete-selection__choice" title="hari"><span class="autocomplete-selection__choice__remove" role="presentation">×</span> Hari</li>
          <li class="autocomplete-selection__search">
            <input class="autocomplete-selection__input" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Search" />
          </li>
        </ul>
      </span>

      <div class="autocomplete-results-query hidden">
        <select class="js-autocomplete-results-query__list autocomplete-results-query__list" multiple="true" tabindex="-1" aria-hidden="false">
          <option class="autocomplete-results-query__value" selected="selected">Hari</option>
          <option class="autocomplete-results-query__value" selected="selected">Seldon</option>
          <option class="autocomplete-results-query__value" value="ford">Ford</option>
          <option class="autocomplete-results-query__value" value="prefect">Prefect</option>
        </select>
      </div>
     </div>
    </div>
</body>
</html>

## jsbin.buyeca.css
* {
  display: border-box;
}

body, html {
  font-family: arial;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.col-12 {
  width: 60%;
}


.autocomplete {
  width: 100%;
}

.autocomplete-selection {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;

  font-size: 16px;
  width: 100%;
  height: 42px;

  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: text;
}

.autocomplete-selection__list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  height: 100%;
  width: 100%;
  padding: 5px;
}

.autocomplete-selection__choice {
  display: flex;
  align-items: center;
  padding: 0 3px;
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  height: 100%;

}

.autocomplete-selection__choice__remove {
  color: #999;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 2px;
}

.autocomplete-selection__search {
    flex: 3;
    float: left;
}

.autocomplete-selection__input {

  background: transparent;
  width: 100%;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield;

  box-sizing: border-box;
  font-size: 100%;
  padding: 0;
}

.autocomplete-results-query {
  position: absolute;
  z-index: 50;
  font-size: 16px;
  width: 60%;
}

.autocomplete-results-query__list {
  font-size: inherit;
  width: 100%;
}

.autocomplete-results-query {
  max-height: 200px;
  overflow-y: auto;
}

.autocomplete-results-query__value {
  padding: 6px;
}

.hidden {
  display: none;
}

## jsbin.buyeca.js
let Observable = Rx.Observable;

let element = document.querySelector('.autocomplete-selection__input');

let onclick = Observable.fromEvent(element, 'click');
let onkeydown = Observable.fromEvent(element, 'keydown');

onclick.forEach(openDropdownHandler);

onkeydown
  .filter(e => e.keyCode === 13)
  .forEach(() => {
    openDropdownHandler();
    document.querySelector('.autocomplete-results-query select').focus();
  });

onkeydown
  .filter(e => e.keyCode === 9)
  .forEach(() => closeDropdown());

onkeydown
  .filter(e => e.keyCode !== 9 && e.keyCode !== 13)
  .forEach(openDropdownHandler);

let mousedowns = [];

function openDropdownHandler() {
  document.querySelector('.autocomplete-results-query').classList.remove('hidden');

  var results = document.querySelectorAll('.autocomplete-results-query__value');

  for (var i = 0, len = results.length; i < len; i++) {
    let itemMouseDown = Observable.fromEvent(results[i], 'mousedown');

    mousedowns.push(itemMouseDown.forEach(mouseUpHandler));
  }

  document.querySelector('.autocomplete-results-query select').addEventListener('keydown', keyPressHandler);
}

function mouseUpHandler(e) {
  e.preventDefault();
  e.target.selected = !e.target.selected;
  closeDropdown();
  document.querySelector('.autocomplete-selection__input').focus();

  return false;
}

function keyPressHandler(e) {
  if (e.keyCode === 13) {
    mouseUpHandler(e);
  } else if (e.keyCode === 9){
    e.preventDefault();
    closeDropdown();
    document.querySelector('.autocomplete-selection__input').focus();
  }

  return false;
}

function closeDropdown() {
  window.setTimeout(function() {
      document.querySelector('.autocomplete-results-query').classList.add('hidden');
      mousedowns.forEach(subscription => subscription.dispose());

      document.querySelector('.autocomplete-results-query select').removeEventListener('keypress', keyPressHandler);
    }, 1);
}

let list = document.querySelector('.js-autocomplete-results-query__list');
let keyup = Observable.fromEvent(element, 'keyup');

keyup
  .debounce(250)
  .map((e) => e.target.value)
  .filter((text) => text)
  .forEach(function (text) {
    return searchUser(text)
      .map(data => data.items || [])
      .forEach((items:Array) => {
         list.innerHTML = '';

         let fragment = document.createDocumentFragment();

         items.forEach((item) => {
           let li = document.createElement('option');

           li.innerText = item.login;
           li.value = item.login;
           li.classList.add('autocomplete-results-query__value');

           li.addEventListener('mousedown', mouseUpHandler);

           fragment.appendChild(li);
         });

         list.appendChild(fragment);
      });
  });

function apiUser(text:String):Promise {
  return fetch('https://api.github.com/search/users?q='+text);
}

function searchUser(text:String) {
  return Observable.create((observer) => {
     return apiUser(text)
       .then(response => response.json())
       .then(data => {
          observer.onNext(data);
       });
  });
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<div class="col-12">
	<div class="autcomplete">
	<span class="autocomplete-selection" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="-1">
	<ul class="autocomplete-selection__list">
	<li class="autocomplete-selection__choice" title="hari"><span class="autocomplete-selection__choice__remove" role="presentation">×</span> Hari</li>
	<li class="autocomplete-selection__search">
	<input class="autocomplete-selection__input" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Search" />
	</li>
	</ul>
	</span>

	<div class="autocomplete-results-query hidden">
	<select class="js-autocomplete-results-query__list autocomplete-results-query__list" multiple="true" tabindex="-1" aria-hidden="false">
	<option class="autocomplete-results-query__value" selected="selected">Hari</option>
	<option class="autocomplete-results-query__value" selected="selected">Seldon</option>
	<option class="autocomplete-results-query__value" value="ford">Ford</option>
	<option class="autocomplete-results-query__value" value="prefect">Prefect</option>
	</select>
	</div>
	</div>
	</div>
	</body>
	</html>
	* {
	display: border-box;
	}

	body, html {
	font-family: arial;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	.col-12 {
	width: 60%;
	}


	.autocomplete {
	width: 100%;
	}

	.autocomplete-selection {
	box-sizing: border-box;
	display: inline-block;
	margin: 0;
	position: relative;
	vertical-align: middle;

	font-size: 16px;
	width: 100%;
	height: 42px;

	background-color: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: text;
	}

	.autocomplete-selection__list {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	height: 100%;
	width: 100%;
	padding: 5px;
	}

	.autocomplete-selection__choice {
	display: flex;
	align-items: center;
	padding: 0 3px;
	background-color: #e4e4e4;
	border: 1px solid #aaa;
	border-radius: 4px;
	cursor: default;
	float: left;
	margin-right: 5px;
	height: 100%;

	}

	.autocomplete-selection__choice__remove {
	color: #999;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	margin-right: 2px;
	}

	.autocomplete-selection__search {
	flex: 3;
	float: left;
	}

	.autocomplete-selection__input {

	background: transparent;
	width: 100%;
	border: none;
	outline: 0;
	box-shadow: none;
	-webkit-appearance: textfield;

	box-sizing: border-box;
	font-size: 100%;
	padding: 0;
	}

	.autocomplete-results-query {
	position: absolute;
	z-index: 50;
	font-size: 16px;
	width: 60%;
	}

	.autocomplete-results-query__list {
	font-size: inherit;
	width: 100%;
	}

	.autocomplete-results-query {
	max-height: 200px;
	overflow-y: auto;
	}

	.autocomplete-results-query__value {
	padding: 6px;
	}

	.hidden {
	display: none;
	}
	let Observable = Rx.Observable;

	let element = document.querySelector('.autocomplete-selection__input');

	let onclick = Observable.fromEvent(element, 'click');
	let onkeydown = Observable.fromEvent(element, 'keydown');

	onclick.forEach(openDropdownHandler);

	onkeydown
	.filter(e => e.keyCode === 13)
	.forEach(() => {
	openDropdownHandler();
	document.querySelector('.autocomplete-results-query select').focus();
	});

	onkeydown
	.filter(e => e.keyCode === 9)
	.forEach(() => closeDropdown());

	onkeydown
	.filter(e => e.keyCode !== 9 && e.keyCode !== 13)
	.forEach(openDropdownHandler);

	let mousedowns = [];

	function openDropdownHandler() {
	document.querySelector('.autocomplete-results-query').classList.remove('hidden');

	var results = document.querySelectorAll('.autocomplete-results-query__value');

	for (var i = 0, len = results.length; i < len; i++) {
	let itemMouseDown = Observable.fromEvent(results[i], 'mousedown');

	mousedowns.push(itemMouseDown.forEach(mouseUpHandler));
	}

	document.querySelector('.autocomplete-results-query select').addEventListener('keydown', keyPressHandler);
	}

	function mouseUpHandler(e) {
	e.preventDefault();
	e.target.selected = !e.target.selected;
	closeDropdown();
	document.querySelector('.autocomplete-selection__input').focus();

	return false;
	}

	function keyPressHandler(e) {
	if (e.keyCode === 13) {
	mouseUpHandler(e);
	} else if (e.keyCode === 9){
	e.preventDefault();
	closeDropdown();
	document.querySelector('.autocomplete-selection__input').focus();
	}

	return false;
	}

	function closeDropdown() {
	window.setTimeout(function() {
	document.querySelector('.autocomplete-results-query').classList.add('hidden');
	mousedowns.forEach(subscription => subscription.dispose());

	document.querySelector('.autocomplete-results-query select').removeEventListener('keypress', keyPressHandler);
	}, 1);
	}

	let list = document.querySelector('.js-autocomplete-results-query__list');
	let keyup = Observable.fromEvent(element, 'keyup');

	keyup
	.debounce(250)
	.map((e) => e.target.value)
	.filter((text) => text)
	.forEach(function (text) {
	return searchUser(text)
	.map(data => data.items \|\| [])
	.forEach((items:Array) => {
	list.innerHTML = '';

	let fragment = document.createDocumentFragment();

	items.forEach((item) => {
	let li = document.createElement('option');

	li.innerText = item.login;
	li.value = item.login;
	li.classList.add('autocomplete-results-query__value');

	li.addEventListener('mousedown', mouseUpHandler);

	fragment.appendChild(li);
	});

	list.appendChild(fragment);
	});
	});

	function apiUser(text:String):Promise {
	return fetch('https://api.github.com/search/users?q='+text);
	}

	function searchUser(text:String) {
	return Observable.create((observer) => {
	return apiUser(text)
	.then(response => response.json())
	.then(data => {
	observer.onNext(data);
	});
	});
	}