Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 6, 2016 19:06
Show Gist options
  • Save anonymous/1c2ed0205db49e803b16fdb8c79c7279 to your computer and use it in GitHub Desktop.
Save anonymous/1c2ed0205db49e803b16fdb8c79c7279 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/buyeca
Raw
index.html
<!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>
Raw
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;
}
Raw
jsbin.buyeca.js
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