Быстрый поиск Доп. характеристик в огромном списке.

foreach ($rows as $row)
{
echo '<option value="'.$row["id"].'"'
.($type == 'param' && ! empty($params["id"]) && $params["id"] == $row["id"] ? ' selected="selected" ' : '' )
.' type="'.$row["type"].'">'.$row["name"].'</option>';
}
echo '</select>';
}

if ($rows)
{

echo '<select name="param_id" id="param_select">';
echo '<option value="0">Создать автоматически</option>';
foreach ($rows as $row)
{
echo '<option value="'.$row["id"].'"'
.($type == 'param' && ! empty($params["id"]) && $params["id"] == $row["id"] ? ' selected="selected" ' : '' )
.' type="'.$row["type"].'">'.$row["name"].'</option>';
}
echo '</select>';
echo '</div>';

echo '<style>
.result-item { padding:8px; cursor:pointer; }
.result-item:hover { background-color:#f0f0f0; max-width: 428px; }
#param_search { margin-right: 10px; }
</style>';

echo "<script>
document.addEventListener('DOMContentLoaded', function() {
// Получаем элементы
const searchInput = document.getElementById('param_search');
const select = document.getElementById('param_select');
const resultsContainer = document.getElementById('param_results'); // Добавьте этот div в HTML

// Функция для обновления списка результатов
function updateResults(searchTerm) {
const options = Array.from(select.options);
const filtered = options.filter(option => {
return option.text.toLowerCase().includes(searchTerm.toLowerCase());
});

// Очищаем контейнер
resultsContainer.innerHTML = '';

// Если нет результатов — показываем сообщение
if (filtered.length === 0) {
resultsContainer.innerHTML = '<div>Ничего не найдено</div>';
return;
}

// Создаем элементы списка
filtered.forEach(option => {
const item = document.createElement('div');
item.className = 'result-item';
item.textContent = option.text;
item.dataset.value = option.value;

// Обработчик клика по элементу
item.addEventListener('click', () => {
select.value = item.dataset.value;
searchInput.value = item.textContent;
resultsContainer.style.display = 'none'; // Скрываем список
});

resultsContainer.appendChild(item);
});

// Показываем контейнер с результатами
resultsContainer.style.display = 'block';
}

// Обработчик ввода в поле поиска
searchInput.addEventListener('input', function() {
const searchTerm = this.value;
if (searchTerm.trim() === '') {
resultsContainer.style.display = 'none';
return;
}
updateResults(searchTerm);
});

// Показываем список при фокусе на поле
searchInput.addEventListener('focus', function() {
if (this.value.trim() !== '') {
updateResults(this.value);
}
});

// Скрываем список при потере фокуса
searchInput.addEventListener('blur', function() {
setTimeout(() => {
resultsContainer.style.display = 'none';
}, 200);
});
});
</script>";

}