Je Feld genau ein Buchstabe. Umlaute (ä, ö, ü) und ß sind erlaubt.
- - -Mehrere Buchstaben ohne Trennzeichen eingeben (z. B. „aei“).
+ +Gib einen Buchstaben ein und füge ihn mit „+“ zur Liste hinzu.
- - -Buchstaben, die nicht vorkommen (z. B. „rst“).
+ +Gib einen Buchstaben ein und füge ihn mit „+“ zur Liste hinzu.
@@ -201,6 +217,64 @@ var countEl = document.getElementById('visible-count'); if (countEl) countEl.textContent = String(visible); } + function updateLettersList(listElementId, lettersString) { + var ul = document.getElementById(listElementId); + if (!ul) return; + while (ul.firstChild) ul.removeChild(ul.firstChild); + var letters = (lettersString || '') + .split('') + .filter(function(ch){ return !!ch; }) + .map(function(ch){ return ch.toLowerCase(); }) + .sort(function(a,b){ return a.localeCompare(b, 'de'); }); + letters.forEach(function(ch){ + var li = document.createElement('li'); + var badge = document.createElement('span'); + badge.className = 'badge'; + var lower = ch.toLowerCase(); + badge.textContent = lower.toUpperCase(); + badge.setAttribute('data-letter', lower); + badge.title = 'Zum Entfernen klicken'; + badge.setAttribute('aria-label', "Buchstabe '" + lower.toUpperCase() + "' entfernen"); + // Drag & Drop für Includes-Liste aktivieren + if (listElementId === 'includes-list') { + badge.draggable = true; + badge.addEventListener('dragstart', function(e){ + try { + e.dataTransfer.setData('text/plain', lower); + e.dataTransfer.setData('text/list', listElementId); + e.dataTransfer.effectAllowed = 'move'; + } catch (err) {} + }); + } + li.appendChild(badge); + ul.appendChild(li); + }); + } + function removeLetterFromList(hiddenId, listId, letter) { + var hidden = document.getElementById(hiddenId); + if (!hidden) return; + var current = hidden.value || ''; + var next = (current || '').split('').filter(function(ch){ return ch !== letter; }).join(''); + hidden.value = next; + updateLettersList(listId, next); + } + function addLetterFromInput(inputId, hiddenId, listId) { + var input = document.getElementById(inputId); + var hidden = document.getElementById(hiddenId); + if (!input || !hidden) return; + var raw = (input.value || '').trim(); + if (!raw) return; + var ch = raw[0]; + if (!/[A-Za-zÄÖÜäöüß]/.test(ch)) { input.value = ''; return; } + var lower = ch.toLowerCase(); + var current = hidden.value || ''; + if (current.indexOf(lower) === -1) { + hidden.value = current + lower; + updateLettersList(listId, hidden.value); + } + input.value = ''; + input.focus(); + } window.addEventListener('load', function() { var ot = document.getElementById('filter-ot'); var wf = document.getElementById('filter-wf'); @@ -209,6 +283,62 @@ if (wf) wf.addEventListener('change', applyFilters); if (uml) uml.addEventListener('change', applyFilters); applyFilters(); + // Listen initial aus Hidden-Feldern rendern + var hiddenInc = document.getElementById('includes'); + var hiddenExc = document.getElementById('excludes'); + updateLettersList('includes-list', hiddenInc ? hiddenInc.value : ''); + updateLettersList('excludes-list', hiddenExc ? hiddenExc.value : ''); + // Add-Buttons verdrahten + var addIncBtn = document.getElementById('includes-add-button'); + if (addIncBtn) addIncBtn.addEventListener('click', function(){ addLetterFromInput('includes-input-one', 'includes', 'includes-list'); }); + var addExcBtn = document.getElementById('excludes-add-button'); + if (addExcBtn) addExcBtn.addEventListener('click', function(){ addLetterFromInput('excludes-input-one', 'excludes', 'excludes-list'); }); + // Enter-Handling in den Ein-Feld-Eingaben + var incInputOne = document.getElementById('includes-input-one'); + if (incInputOne) incInputOne.addEventListener('keydown', function(e){ if (e.key === 'Enter') { e.preventDefault(); addLetterFromInput('includes-input-one', 'includes', 'includes-list'); } }); + var excInputOne = document.getElementById('excludes-input-one'); + if (excInputOne) excInputOne.addEventListener('keydown', function(e){ if (e.key === 'Enter') { e.preventDefault(); addLetterFromInput('excludes-input-one', 'excludes', 'excludes-list'); } }); + // Entfernen per Klick auf Badge (Event Delegation) + var incList = document.getElementById('includes-list'); + if (incList) incList.addEventListener('click', function(e){ + var t = e.target; + if (t && t.classList && t.classList.contains('badge')) { + var letter = (t.getAttribute('data-letter') || t.textContent || '').trim().toLowerCase(); + if (letter) removeLetterFromList('includes', 'includes-list', letter); + } + }); + var excList = document.getElementById('excludes-list'); + if (excList) excList.addEventListener('click', function(e){ + var t = e.target; + if (t && t.classList && t.classList.contains('badge')) { + var letter = (t.getAttribute('data-letter') || t.textContent || '').trim().toLowerCase(); + if (letter) removeLetterFromList('excludes', 'excludes-list', letter); + } + }); + // Drop-Ziele für Positionsfelder (pos1..pos5) + for (var i = 1; i <= 5; i++) { + (function(idx){ + var input = document.getElementById('pos' + idx); + if (!input) return; + input.addEventListener('dragover', function(e){ + e.preventDefault(); + try { e.dataTransfer.dropEffect = 'move'; } catch (err) {} + input.classList.add('drop-target'); + }); + input.addEventListener('dragleave', function(){ input.classList.remove('drop-target'); }); + input.addEventListener('drop', function(e){ + e.preventDefault(); + input.classList.remove('drop-target'); + var letter = (e.dataTransfer.getData('text/plain') || '').trim().toLowerCase(); + var sourceList = e.dataTransfer.getData('text/list') || ''; + if (letter && sourceList === 'includes-list' && /[a-zäöüß]/i.test(letter)) { + input.value = letter; + removeLetterFromList('includes', 'includes-list', letter); + input.focus(); + } + }); + })(i); + } // Reset-Button Funktionalität var resetButton = document.getElementById('reset-button'); @@ -223,9 +353,17 @@ // Weitere Felder zurücksetzen var includesField = document.getElementById('includes'); if (includesField) includesField.value = ''; + var includesList = document.getElementById('includes-list'); + if (includesList) includesList.innerHTML = ''; + var incInput = document.getElementById('includes-input-one'); + if (incInput) incInput.value = ''; var excludesField = document.getElementById('excludes'); if (excludesField) excludesField.value = ''; + var excludesList = document.getElementById('excludes-list'); + if (excludesList) excludesList.innerHTML = ''; + var excInput = document.getElementById('excludes-input-one'); + if (excInput) excInput.value = ''; // Suchergebnisse ausblenden var resultsDiv = document.getElementById('results');