Switch large table search to submit

components/data-display.html

@@ -80,7 +80,7 @@
     <article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
       <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">
         <div class="sg-strong">Large Table</div>
-        <span class="sg-search-field-row" data-component="search-field">
+        <form class="sg-search-field-row" data-component="search-field" data-large-table-search-form>
           <span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable">
             <input
               class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
@@ -91,7 +91,7 @@
             >
             <button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
           </span>
-        </span>
+        </form>
       </div>
 
       <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">
@@ -224,6 +224,7 @@
       const searchInput = table.querySelector('[data-large-table-search]');
       const searchFieldWrap = table.querySelector('[data-component="single-line-input"]');
       const searchClearButton = table.querySelector('.sg-input-clear-button');
+      const searchForm = table.querySelector('[data-large-table-search-form]');
       const state = {
         columnIndex: 0,
         direction: 'ascending',
@@ -316,10 +317,16 @@
 
       if (searchInput) {
         searchInput.addEventListener('input', () => {
-          state.query = searchInput.value.trim().toLowerCase();
           if (searchFieldWrap) {
             searchFieldWrap.setAttribute('data-has-value', searchInput.value ? 'true' : 'false');
           }
+        });
+      }
+
+      if (searchForm && searchInput) {
+        searchForm.addEventListener('submit', (event) => {
+          event.preventDefault();
+          state.query = searchInput.value.trim().toLowerCase();
           renderRows();
         });
       }