entry.id);
item.setAttribute(
'style',
'display:grid; grid-auto-flow: column; user-select: none; align-items: center;'
);
item.tabIndex = 0;
// Checkbox
if (this.options.isMultiSelect) {
item.innerHTML = `
sel.id === entry.id) ? ' checked="checked"' : ''
}>
`;
}
// Image
if (entry.image) {
const img = document.createElement('img');
img.classList.add('circle');
img.src = entry.image;
item.appendChild(img);
}
// Text
const inputText = this.el.value.toLocaleLowerCase();
const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
const div = document.createElement('div');
div.setAttribute('style', 'line-height:1.2;font-weight:500;');
if (this.options.allowUnsafeHTML) {
div.innerHTML = parts[0] + '' + parts[1] + '' + parts[2];
} else {
div.appendChild(document.createTextNode(parts[0]));
if (parts[1]) {
const highlight = document.createElement('span');
highlight.textContent = parts[1];
highlight.classList.add('highlight');
div.appendChild(highlight);
div.appendChild(document.createTextNode(parts[2]));
}
}
const itemText = document.createElement('div');
itemText.classList.add('item-text');
itemText.setAttribute('style', 'padding:5px;overflow:hidden;');
item.appendChild(itemText);
item.querySelector('.item-text').appendChild(div);
// Description
if (
typeof entry.description === 'string' ||
(typeof entry.description === 'number' && !isNaN(entry.description))
) {
const description = document.createElement('small');
description.setAttribute(
'style',
'line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;'
);
description.innerText = entry.description;
item.querySelector('.item-text').appendChild(description);
}
// Set Grid
const getGridConfig = () => {
if (this.options.isMultiSelect) {
if (entry.image) return '40px min-content auto'; // cb-img-txt
return '40px auto'; // cb-txt
}
if (entry.image) return 'min-content auto'; // img-txt
return 'auto'; // txt
};
item.style.gridTemplateColumns = getGridConfig();
return item;
}
_renderDropdown() {
this._resetAutocomplete();
// Check if Data is empty
if (this.menuItems.length === 0) {
this.menuItems = this.selectedValues; // Show selected Items
}
for (let i = 0; i < this.menuItems.length; i++) {
const item = this._createDropdownItem(this.menuItems[i]);
this.container.append(item);
}
}
_setStatusLoading() {
this.el.parentElement.querySelector('.status-info').innerHTML =
``;
}
_updateSelectedInfo() {
const statusElement = this.el.parentElement.querySelector('.status-info');
if (statusElement) {
if (this.options.isMultiSelect)
statusElement.innerHTML = this.selectedValues.length.toString();
else statusElement.innerHTML = '';
}
}
_refreshInputText() {
if (this.selectedValues.length === 1) {
const entry = this.selectedValues[0];
this.el.value = entry.text || entry.id; // Write Text to Input
}
}
_triggerChanged() {
this.el.dispatchEvent(new Event('change'));
// Trigger Autocomplete Event
if (typeof this.options.onAutocomplete === 'function')
this.options.onAutocomplete.call(this, this.selectedValues);
}
/**
* Show autocomplete.
*/
open = () => {
const inputText = this.el.value.toLocaleLowerCase();
this._resetAutocomplete();
if (inputText.length >= this.options.minLength) {
this.isOpen = true;
this._renderDropdown();
}
// Open dropdown
if (!this.dropdown.isOpen) {
setTimeout(() => {
this.dropdown.open();
}, 0); // TODO: why?
} else this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open
};
/**
* Hide autocomplete.
*/
close = () => {
this.dropdown.close();
};
/**
* Updates the visible or selectable items shown in the menu.
* @param menuItems Items to be available.
* @param selected Selected item ids
* @param open Option to conditionally open dropdown
*/
setMenuItems(menuItems: AutocompleteData[], selected: number[] | string[] = null, open: boolean = true) {
this.menuItems = menuItems;
this.options.data = menuItems;
if (selected) {
this.selectedValues = this.menuItems.filter(
(item) => !(selected.indexOf(item.id) === -1)
);
}
if (this.options.isMultiSelect) {
this._renderDropdown();
} else {
this._refreshInputText();
}
if (open) this.open();
this._updateSelectedInfo();
this._triggerChanged();
}
/**
* Sets selected values.
* @deprecated @see https://github.com/materializecss/materialize/issues/552
* @param entries
*/
setValues(entries: AutocompleteData[]) {
this.selectedValues = entries;
this._updateSelectedInfo();
if (!this.options.isMultiSelect) {
this._refreshInputText();
}
this._triggerChanged();
}
/**
* Select a specific autocomplete option via id-property.
* @param id The id of a data-entry.
*/
selectOption(id: number | string) {
const entry = this.menuItems.find((item) => item.id == id);
if (!entry) return;
// Toggle Checkbox
/* const li = this.container.querySelector('li[data-id="' + id + '"]');
if (!li) return;*/
if (this.options.isMultiSelect) {
/* const checkbox = li.querySelector('input[type="checkbox"]');
checkbox.checked = !checkbox.checked;*/
if (!(this.selectedValues.filter(
(selectedEntry) => selectedEntry.id === entry.id
).length >= 1)) this.selectedValues.push(entry);
else this.selectedValues = this.selectedValues.filter(
(selectedEntry) => selectedEntry.id !== entry.id
);
this._renderDropdown();
this.el.focus();
} else {
// Single-Select
this.selectedValues = [entry];
this._refreshInputText();
this._resetAutocomplete();
this.close();
}
this._updateSelectedInfo();
this._triggerChanged();
}
selectOptions(ids: []) {
const entries = this.menuItems.filter(
(item) => !(ids.indexOf(item.id) === -1)
);
if (!entries) return;
this.selectedValues = entries;
this._renderDropdown();
}
}