Move search-suggestions outside the TermInput's form

src/FormElement/SearchSuggestions.php

@@ -6,6 +6,7 @@
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\HtmlElement;
 use ipl\Html\Text;
+use ipl\Html\ValidHtml;
 use ipl\I18n\Translation;
 use Psr\Http\Message\ServerRequestInterface;
 use Traversable;
@@ -42,6 +43,7 @@ class SearchSuggestions extends BaseHtmlElement
      * The provider must deliver terms in form of arrays with the following keys:
      * * (required) search: The search value
      * * label: A human-readable label
+     * * details: {@see ValidHtml} to render inside a button element instead of an input
      * * class: A CSS class
      * * title: A message shown upon hover on the term
      *
@@ -234,7 +236,7 @@ protected function assemble(): void
             $provider = ['' => $this->provider];
         }
 
-        /** @var iterable<?string, array<array<string, string>>> $provider */
+        /** @var iterable<?string, array<array<string, string|ValidHtml>>> $provider */
         foreach ($provider as $group => $suggestions) {
             if ($group) {
                 $this->addHtml(
@@ -251,18 +253,31 @@ protected function assemble(): void
                     'type' => 'button',
                     'value' => $data['label'] ?? $data['search']
                 ];
+                $details = $data['details'] ?? null;
+                unset($data['details']);
                 foreach ($data as $name => $value) {
                     $attributes["data-$name"] = $value;
                 }
 
+                if ($details instanceof ValidHtml) {
+                    $attributes['class'] = 'has-details';
+                    $content = new HtmlElement(
+                        'button',
+                        Attributes::create($attributes),
+                        $details
+                    );
+                } else {
+                    $content = new HtmlElement(
+                        'input',
+                        Attributes::create($attributes)
+                    );
+                }
+
                 $this->addHtml(
                     new HtmlElement(
                         'li',
                         null,
-                        new HtmlElement(
-                            'input',
-                            Attributes::create($attributes)
-                        )
+                        $content
                     )
                 );
             }

src/FormElement/TermInput.php

@@ -7,6 +7,7 @@
 use ipl\Html\Form;
 use ipl\Html\FormElement\FieldsetElement;
 use ipl\Html\FormElement\HiddenElement;
+use ipl\Html\HtmlDocument;
 use ipl\Html\HtmlElement;
 use ipl\Html\HtmlString;
 use ipl\Stdlib\Events;
@@ -328,6 +329,15 @@ public function onRegistered(Form $form)
         $this->hasBeenAutoSubmitted = in_array($mainInputId, $autoSubmittedBy, true)
             || in_array($termContainerId, $autoSubmittedBy, true);
 
+        $suggestions = (new HtmlElement('div'))
+            ->setAttribute('id', Attribute::sanitizeId($this->getValueOfNameAttribute()) . '-suggestions')
+            ->setAttribute('class', 'search-suggestions');
+
+        $form->prependWrapper(
+            (new HtmlDocument())
+                ->addHtml($form, $suggestions)
+        );
+
         parent::onRegistered($form);
     }
 
@@ -408,10 +418,6 @@ protected function assemble()
 
         $termContainer = $this->termContainer();
 
-        $suggestions = (new HtmlElement('div'))
-            ->setAttribute('id', $suggestionsId)
-            ->setAttribute('class', 'search-suggestions');
-
         $termInput = $this->createElement('hidden', 'value', [
             'id' => $termInputId,
             'disabled' => true
@@ -508,8 +514,6 @@ public function getValueAttribute()
             new HtmlElement('label', null, $mainInput)
         )));
 
-        $this->addHtml($suggestions);
-
         if (! $this->hasBeenAutoSubmitted()) {
             $this->emit(self::ON_ENRICH, [$this->getTerms()]);
         }