Standardmäßig leitet das JetSearch-Widget von Crocoblock beim Drücken der Enter-Taste auf die Suchergebnisseite weiter. Das kann unerwünscht sein, wenn ausschließlich die AJAX-Ergebnisse genutzt werden sollen und Besucher nur einzelne Treffer anklicken sollen.
Ein normales Blockieren des submit-Events oder der Enter-Taste mit jQuery reicht nicht aus, da JetSearch die Tasteneingabe selbst verarbeitet.
Lösung
Das Ereignis muss bereits in der Capture-Phase abgefangen werden. Dadurch wird verhindert, dass JetSearch den Enter-Tastendruck verarbeitet und das Formular absendet.
document.addEventListener('keydown', function (event) {
if (
event.key === 'Enter' &&
event.target.closest('.jet-ajax-search')
) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
}, true);
document.addEventListener('submit', function (event) {
if (event.target.closest('.jet-ajax-search')) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
}, true);
Ergebnis
- ✔ Die AJAX-Suchergebnisse erscheinen weiterhin während der Eingabe.
- ✔ Einzelne Suchtreffer bleiben ganz normal anklickbar.
- ✔ Es erfolgt keine Weiterleitung auf die Suchergebnisseite beim Drücken der Enter-Taste.
- ✔ Das Formular kann auch nicht versehentlich abgesendet werden.
Hinweis
Der entscheidende Bestandteil ist der Parameter true am Ende von addEventListener(). Dadurch wird der Event-Handler bereits in der Capture-Phase ausgeführt – also bevor JetSearch selbst den Tastendruck verarbeitet. Ohne diesen Parameter greift der Code in der Regel nicht.