-
-
Save HenriqueLimas/9b0833f48f927810f2b2ee473780f4e4 to your computer and use it in GitHub Desktop.
JS Bin// source http://jsbin.com/buyeca
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment