document.addEventListener('DOMContentLoaded', function () {
// 1. Get the existing Flatsome search input
// Adjust this selector if needed after inspecting your markup
var searchInput = document.querySelector('.searchform input[type="search"], .search-field');
var dropdown = document.getElementById('service-dropdown');
if (!searchInput || !dropdown) return;
// Make sure the parent is positioned so the dropdown can sit under it
var wrapper = searchInput.closest('.searchform, .searchform-wrapper, .ux-search-box, .col-inner');
if (wrapper && getComputedStyle(wrapper).position === 'static') {
wrapper.style.position = 'relative';
}
// 2. Show dropdown on focus / click
searchInput.addEventListener('focus', function () {
dropdown.style.display = 'block';
});
searchInput.addEventListener('click', function () {
dropdown.style.display = 'block';
});
// 3. Filter services as user types
var options = dropdown.querySelectorAll('[data-url]');
searchInput.addEventListener('input', function () {
var val = this.value.toLowerCase().trim();
var anyVisible = false;
options.forEach(function (opt) {
var text = opt.textContent.toLowerCase();
if (!val || text.includes(val)) {
opt.style.display = 'block';
anyVisible = true;
} else {
opt.style.display = 'none';
}
});
dropdown.style.display = anyVisible ? 'block' : 'none';
});
// 4. Hide dropdown on outside click
document.addEventListener('click', function (e) {
if (!dropdown.contains(e.target) && e.target !== searchInput) {
dropdown.style.display = 'none';
}
});
// 5. Navigate when a service is clicked
window.selectService = function (el) {
var url = el.getAttribute('data-url');
if (url) window.location.href = url;
};
});
