JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<div id="share-container" class="apps-share-chips-container">
<textarea id="tags" class="apps-share-chips-input" placeholder="Add more people ..."></textarea>
</div>
JavaScript
$(function() {
var _array = ['<li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"><a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"><img class="apps-share-chips-profile-icon" src="build/assets/apple.png" onerror="helper.onImageError(this);"><span search="text">[email protected]</span></a></li>',
'<li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"><a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"><img class="apps-share-chips-profile-icon" src="build/assets/ms.png" onerror="helper.onImageError(this);"><span search="text">[email protected]</span></a></li>'
];
$('#tags')
.autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(_array, request.term);
response(results.slice(0, 100));
},
create: function() {
$(this).data('ui-autocomplete')._renderItem = function(ul, item) {
return $(item.label).appendTo(ul);
};
},
});
});