Skip to content

Instantly share code, notes, and snippets.

@dirumahrafif
Last active October 23, 2022 23:22
Show Gist options
  • Select an option

  • Save dirumahrafif/ad0043b2d07c3a5944c62cec767721a9 to your computer and use it in GitHub Desktop.

Select an option

Save dirumahrafif/ad0043b2d07c3a5944c62cec767721a9 to your computer and use it in GitHub Desktop.
<!-- insert into your tag head -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"
integrity="sha512-wcf2ifw+8xI4FktrSorGwO7lgRzGx1ld97ySj1pFADZzFdcXTIgQhHMTo7tQIADeYdRRnAjUnF00Q5WTNmL3+A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.tokenfield .token {
margin: -1px 1px 1px 1px;
height: 25px;
line-height: 22px;
color: #fff;
background-color: #0b5ed7
}
.tokenfield .token a {
color: #FFFFFF;
text-decoration: none;
}
</style>
<!-- insert into your last tag body -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
<script>
$(document).ready(function() {
$('.skill').tokenfield({
autocomplete: {
source: [{!! $skill !!}],
delay: 100
},
showAutocompleteOnFocus: true
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment