Amélioration UX recherche

This commit is contained in:
Jean-Marie Favreau 2025-04-20 22:03:21 +02:00
parent 6ec9c62396
commit 102fbdb880
2 changed files with 51 additions and 3 deletions

View File

@ -1457,6 +1457,24 @@ img.preview {
transform: rotate(0);
}
}
.choices__input-wrapper {
position: relative;
}
.clear-btn {
position: absolute;
width: 3em;
right: 0.5em;
top: 1.3em;
transform: translateY(-50%);
background: transparent;
border: none;
font-size: 16px;
cursor: pointer;
z-index: 10;
}
}
.choices[data-type=select-multiple] {
@ -1519,8 +1537,8 @@ img.preview {
.choices__list--dropdown.is-active .choices__group {
display: block;
}
}
}

View File

@ -59,8 +59,38 @@
setTimeout(() => {
const searchTerm = '{{ object.location }}';
choices.input.focus();
choices.input.value = searchTerm; // Met à jour le champ de recherche visible
choices._handleSearch(searchTerm); // Force la recherche
choices.input.value = searchTerm;
choices._handleSearch(searchTerm);
const inputWrapper = choices.input.element.parentElement;
console.log(choices.input.element);
console.log(inputWrapper);
var clearBtn;
if (inputWrapper) {
inputWrapper.classList.add('choices__input-wrapper');
clearBtn = document.createElement('button');
clearBtn.innerHTML = '×';
clearBtn.className = 'clear-btn';
clearBtn.addEventListener('click', (e) => {
e.preventDefault();
const input = inputWrapper.querySelector('.choices__input');
if (input) input.value = '';
clearBtn.style.display = 'none';
});
inputWrapper.appendChild(clearBtn);
if (choices.input.element) {
choices.input.element.addEventListener('input', () => {
clearBtn.style.display = choices.input.element.value ? 'block' : 'none';
});
}
}
}, 100);