Integrated algolia autocomplete search into navbar

assets/controllers/elements/part_livesearch_controller.js

@@ -24,6 +24,8 @@ import {marked} from "marked";
 
 export default class extends Controller {
 
+    static targets = ["input"];
+
     _autocomplete;
 
     connect() {
@@ -32,9 +34,24 @@ export default class extends Controller {
         // The URL template for the part detail pages
         const part_detail_uri_template = this.element.dataset.detailUrl;
 
+        const that = this;
+
         this._autocomplete = autocomplete({
             container: this.element,
+            panelContainer: document.body,
+            panelPlacement: 'end',
             placeholder: "Search for parts",
+            onSubmit({state, event, ...setters}) {
+                //Put the current text into each target input field
+                const input = that.inputTarget;
+
+                if (!input) {
+                    return;
+                }
+
+                input.value = state.query;
+                input.form.requestSubmit();
+            },
             getSources({ query }) {
                 return [
                     {

templates/_navbar_search.html.twig

@@ -69,6 +69,8 @@
         </div>
     </div>
 
-    <input type="search" class="form-control me-sm-2 my-2" placeholder="{% trans %}search.placeholder{% endtrans %}" name="keyword" required>
+    <div {{ stimulus_controller('elements/part_livesearch') }} class="mt-auto mb-auto"
-    <button type="submit" class="form btn btn-outline-secondary my-2 text-nowrap">{% trans %}search.submit{% endtrans %}</button>
+         data-autocomplete="{{ path('typeahead_parts', {'query': '__QUERY__'}) }}" data-detail-url="{{ path('part_info', {'id': '__ID__'}) }}">
+        <input type="hidden" name="keyword" required {{ stimulus_target('elements/part_livesearch', 'input') }}>
+    </div>
 </form>