Created
May 6, 2016 19:06
-
-
Save anonymous/1c2ed0205db49e803b16fdb8c79c7279 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> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-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; | |
} | |
</style> | |
</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> | |
<script id="jsbin-javascript"> | |
var element = document.querySelector('.autocomplete-selection__input'); | |
element.addEventListener('click', openDropdownHandler); | |
element.addEventListener('keydown', function (e) { | |
if (e.keyCode === 13) { | |
openDropdownHandler(e); | |
document.querySelector('.autocomplete-results-query select').focus(); | |
} else if (e.keyCode === 9) { | |
closeDropdown(); | |
} | |
}); | |
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++) { | |
results[i].addEventListener('mousedown', 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'); | |
var results = document.querySelectorAll('.autocomplete-results-query__value'); | |
for (var i = 0, len = results.length; i < len; i++) { | |
results[i].removeEventListener('mousedown', mouseUpHandler); | |
results[i].removeEventListener('keypress', keyPressHandler); | |
} | |
}, 1); | |
} | |
</script> | |
<script id="jsbin-source-css" type="text/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; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">var element = document.querySelector('.autocomplete-selection__input'); | |
element.addEventListener('click', openDropdownHandler); | |
element.addEventListener('keydown', function (e) { | |
if (e.keyCode === 13) { | |
openDropdownHandler(e); | |
document.querySelector('.autocomplete-results-query select').focus(); | |
} else if (e.keyCode === 9) { | |
closeDropdown(); | |
} | |
}); | |
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++) { | |
results[i].addEventListener('mousedown', 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'); | |
var results = document.querySelectorAll('.autocomplete-results-query__value'); | |
for (var i = 0, len = results.length; i < len; i++) { | |
results[i].removeEventListener('mousedown', mouseUpHandler); | |
results[i].removeEventListener('keypress', keyPressHandler); | |
} | |
}, 1); | |
}</script></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
var element = document.querySelector('.autocomplete-selection__input'); | |
element.addEventListener('click', openDropdownHandler); | |
element.addEventListener('keydown', function (e) { | |
if (e.keyCode === 13) { | |
openDropdownHandler(e); | |
document.querySelector('.autocomplete-results-query select').focus(); | |
} else if (e.keyCode === 9) { | |
closeDropdown(); | |
} | |
}); | |
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++) { | |
results[i].addEventListener('mousedown', 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'); | |
var results = document.querySelectorAll('.autocomplete-results-query__value'); | |
for (var i = 0, len = results.length; i < len; i++) { | |
results[i].removeEventListener('mousedown', mouseUpHandler); | |
results[i].removeEventListener('keypress', keyPressHandler); | |
} | |
}, 1); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment