Skip to content

Instantly share code, notes, and snippets.

@ajcrites
Last active December 11, 2015 21:49
Show Gist options
  • Save ajcrites/4665425 to your computer and use it in GitHub Desktop.
Save ajcrites/4665425 to your computer and use it in GitHub Desktop.
Autocomplete Demo
.x {
width: 20px;
height: 20px;
background-color: gray;
color: white;
margin-left: 5px;
border-radius: 5px;
display: inline-block;
text-align: center;
font-weight: bold;
font-family: Calibri, sans-serif;
cursor: pointer;
}
.x:after {
content: 'x';
}
<ul hidden>
<li>EA_PREO_1</li>
<li>CMA_X</li>
<li>CPA_SOMETHING</li>
</ul>
<input>
$("input").autocomplete({
source: $('li').map(function() {
return $(this).text();
}).get(),
close: function () {
$(this).trigger('blur');
},
minLength: 0
})
.on('focus', function () {
$(this).autocomplete('search');
})
.on('blur', function () {
if ($(this).val()) {
$(this).prop('disabled', true).after($("<span>").addClass('x').on('click', function () {
$("input").prop('disabled', false).val('').trigger('focus');
$(this).remove();
}));
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment