category-map.js
define(
[
'underscore',
'jquery',
'mage/template',
"prototype",
"mage/adminhtml/form"
], function (_,JQuery) {
// <![CDATA[
return mappingControl = {
init: function (googleCategory) {
var self = this;
var cat = googleCategory;
$$('.mapping-input-field').each(
function (item) {
JQuery(item).autocomplete(
{
source:cat.googleCategory,
minLength:3,
select: function (event,suggestion) {
JQuery(event.target).parent().find('.mapping-input').val(suggestion.item.data);
}
}
);
Event.observe(
item, 'change', function (e) {
var input = e.currentTarget;
self.applyPlaceholder(input);
}
);
}
);
$$('.category-mapping .toggle').each(
function (item) {
Event.observe(
item, 'click', function (e) {
self.toggleCategories(e.currentTarget);
}
);
}
);
self.closeAll();
self.applyPlaceholders();
},
toggleCategories: function (item, type) {
var self = this;
if (type === undefined) {
if (item.hasClassName('open')) {
type = 'show';
} else {
type = 'hide';
}
}
var input = item.parentElement.select('.mapping-input-field').first();
var id = input.readAttribute('data-id');
var childs = $$('[data-parent="' + id + '"]');
childs.each(
function (child) {
if (type == 'hide') {
var toggle = child.parentElement.parentElement.select('.toggle').first();
if (toggle.hasClassName('close')) {
self.toggleCategories(toggle, type);
}
child.parentElement.parentElement.hide();
}
else {
child.parentElement.parentElement.show();
}
}
);
if (type == 'show') {
item.addClassName('close').removeClassName('open');
self.applyPlaceholder(input);
} else {
item.addClassName('open').removeClassName('close');
}
},
applyPlaceholders: function () {
var self = this;
$('.mapping-input-field').each(function(input) {
self.applyPlaceholder(input);
});
},
applyPlaceholder: function (input) {
var self = this;
if (input.value === '') {
var value = self.getParentValue(input);
if (value !== '') {
input.writeAttribute('placeholder', value);
} else {
input.removeAttribute('placeholder');
}
}
var id = input.readAttribute('data-id');
var childs = $$('[data-parent="' + id + '"]');
childs.each(
function (child) {
if (child.parentElement.parentElement.visible()) {
self.applyPlaceholder(child);
}
}
);
},
getParentValue: function (input) {
var self = this;
var parentId = input.readAttribute('data-parent');
var parentInput = $$('[data-id="' + parentId + '"]').first();
if (parentInput === undefined) {
return '';
}
var val = parentInput.value;
if (val) {
return val;
} else {
return parentInput.readAttribute('placeholder');
}
},
closeAll: function () {
var self = this;
var elements = $$('.category-mapping .mapping');
elements.each(
function (element) {
var level = element.readAttribute('data-level');
if (level > 0) {
element.hide();
}
}
);
},
getGoogleCategories: function () {
return _.toArray(this.googleCategories);
}
};
// ]]>
}
);
requirejs-config.js
var config = {
map: {
'*': {
CategoryMapGoogle:'VendorName_ModuleName/category-map'
}
}
};
mapping.phtml
<?php
/** @var $block \VendorName\ModuleName\Block\Adminhtml\CategoryMap\Edit\Tab\View */
$categoryList = $block->getCategoriesList();
$formName = $block->getFormName();
$googleCategoryMapping = $block->getCategoryMapping();
$googleCategoryList = $block->getGoogleCategoryAsArray();
?>
<div class="field" id="attribute-category-map-container">
<div class="control category-mapping category-map">
<?php foreach ($categoryList as $category): ?>
<div style="padding:3px 0 3px <?= ($category['level'] * 30) ?>px;"
class="mapping level-<?= $block->escapeHtml($category['level']) ?>"
data-role="<?= $block->escapeHtml($category['parent_id']) ?>-content"
data-level="<?= $block->escapeHtml($category['level']) ?>"
<?php if ($category['level'] > 1): ?>
style="display:none" class="collapse"
<?php endif ?>>
<?php if ($category['has_child']): ?>
<div class="toggle open"></div>
<?php else: ?>
<div class="toggle empty"></div>
<?php endif ?>
<div class="name">
<?= $block->escapeHtml($category['name']) ?>
(ID: <?= $block->escapeHtml($category['id']) ?>)</div>
<div class="map">
<input
class="mapping-input"
type="hidden"
name="mapping[<?= $block->escapeHtml($category['id']) ?>]"
value="<?= $block->escapeHtml($block->getMappingValueForCategory($category['id']));?>"
data-id-hidden="<?= $block->escapeHtml($category['id']) ?>"
data-form-part="<?= $block->escapeHtml($formName) ?>"
data-parent-hidden="<?= $block->escapeHtml($category['parent_id']) ?>">
<?php $googleCategoryLabel = $block->getGoogleCategoryLabelForCategory($category['id']); ?>
<input
class="mapping-input-field"
type="text"
name="mapping-label[<?= $block->escapeHtml($category['id']) ?>]"
value="<?= $block->escapeHtml($googleCategoryLabel) ?>"
data-form-part="<?= $block->escapeHtml($formName) ?>"
data-id="<?= $block->escapeHtml($category['id']) ?>"
data-parent="<?= $block->escapeHtml($category['parent_id']) ?>"
>
<div class="mapping-suggestion"></div>
</div>
<div class="clear"></div>
</div>
<?php endforeach ?>
</div>
</div>
<script>
require([
'CategoryMapGoogle'
], function (CategoryMapGoogle) {
'use strict';
CategoryMapGoogle.init({
'googleCategory' : <?= /* @noEscape */ json_encode($block->getGoogleCategoryLists());?>
});
CategoryMapGoogle.getGoogleCategories();
});
</script>
This code is working fine in magento 2.3 once upgraded to magento 2.4 it's not working and not getting any error in the console.
The working of the script is loading a list of categories from a file and giving suggestions with respect to the input, this part is working perfectly but can't select the suggestion,as per code it should be selectable and append to the input field . when I debug the control skipped from the "autocomplete"
