TagEditor is very powerful jquery plugin for tagging.
Benefits of tagEditor:
- Add multiple tags and can put limits to add tags like add only 5 tags .
- Optional jQuery UI sortable
- Optional jQuery UI autocomplete
- Delimiters to separation of Tags
Here I explained how to use tagEditor in dotnet core using jquery.
<script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="~/lib/tag-editor/jquery.tag-editor.css" rel="stylesheet">
<script src="https://code.jquery.com/1.13.2/jquery-min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="~/lib/tag-editor/jquery.caret.min.js"></script>
<script src="~/lib/tag-editor/jquery.tag-editor.min.js"></script>
</script>
<div class="row mg-t-20">
<div class="col">
<label>Tags</label>
<input type="text" class="form-control" asp-for="Tags"/>
<span asp-validation-for="Tags"></span>
</div>
</div>
$('#Tags').tagEditor({
maxTags: 5, removeDuplicates: true, delimiter: ',; ',
autocomplete: {
delay: 0, position: { collision: 'flip' },
source: function (request, response) {
$.get('url', { term: request.term }, function (res) {
if (res.status === 1) {
response($.map(res.data, function (c) {
return {
label: c.name
}
}));
}
});
}
}
});
For autocomplete tags use jquery ui autocomplete.