JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://randomuser.me/api/portraits/men/78.jpg"></script>
<script src="https://randomuser.me/api/portraits/women/78.jpg"></script>
<script src="https://randomuser.me/api/portraits/men/79.jpg"></script>
<div class="edit--assignee">
</div>
JavaScript
$(document).ready(function() {
$('.edit--assignee').material_chip({
autocompleteOptions: {
data: {
'Kyle Robinson': 'https://randomuser.me/api/portraits/men/78.jpg',
'Rebecca Smith': 'https://randomuser.me/api/portraits/women/78.jpg',
'Aaron Lloyd': 'https://randomuser.me/api/portraits/men/79.jpg'
},
limit: Infinity,
minLength: 1
}
});
$('.chips').on('chip.add', function(e, chip) {
console.log(chip.tag.slice(" "), "chip")
var data = {
'Kyle Robinson': 'https://randomuser.me/api/portraits/men/78.jpg',
'Rebecca Smith': 'https://randomuser.me/api/portraits/women/78.jpg',
'Aaron Lloyd': 'https://randomuser.me/api/portraits/men/79.jpg'
}
var key = chip.tag;
$(this).children('.chip').last().append('<img src="' + data[key] + '">');
});
});