$('#form_img_location').repeater({
initEmpty: false,
defaultValues: {
'text-input': 'foo'
},
show: function () {
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
});
var tagifyFields = document.getElementsByClassName("input-tagify");
var tagifyFieldsList = Array.prototype.slice.call(tagifyFields);
if (tagifyFieldsList.length) {
tagifyFieldsList.forEach(createTagifyFields);
}
function createTagifyFields(input) {
$.ajax({
url: '/MyController/Taglist',
method: 'GET',
data: {},
success: function (response) {
// var input = document.querySelector('input[name="input-custom-dropdown"]'),
// init Tagify script on the above inputs
var tagify = new Tagify(input, {
whitelist: response,
maxTags: 10,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
},
originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
})
var tagify = new Tagify(input, {
whitelist: response,
maxTags: 10,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
})
new Tagify(input);
}
});
}
<div id="form_img_location">
<div class="form-group">
<div data-repeater-list="form_img_location">
<div data-repeater-item>
<div class="form-group row ">
<div class="col-md-3 input-group-sm">
<label class="form-label">Tags:</label>
<input class="form-control form-control-sm tags-look input-tagify tags">
</div>
<div class="col-md-1">
<a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mt-3 mt-md-8">
Delete
</a>
</div>
</div>
</div>
</div>
</div>
<div class="form-group mt-5">
<a href="javascript:;" data-repeater-create class="btn btn-sm btn-secondary">
<i class="ki-duotone ki-plus fs-3"></i>
Add Row
</a>
</div>
</div>
success
?show
callback after a new item is added:// (Optional)
// "show" is called just after an item is added. The item is hidden
// at this point. If a show callback is not given the item will
// have $(this).show() called on it.
show: function () {
// run your code after a new item is added
},