feat: Rewrite search with jquery and use proper dropdown

src/fellchensammlung/static/fellchensammlung/css/main.scss

@@ -20,6 +20,22 @@ $grey-dark: #262728;
 }
 
 
+// Search form suggestion dropdown
+
+#location-result-list {
+    display: inline; //ensures that the dropdown is not restricted in width WTF
+}
+
+.result-item {
+    cursor: pointer;
+}
+
+.result-item:hover {
+    background-color: #b2aaaa;
+}
+
+
+// Toggle switch
 
 .toggle-switch {
     display: inline-block;

src/fellchensammlung/templates/fellchensammlung/base.html

@@ -19,6 +19,7 @@
 
     <script src="{% static 'fellchensammlung/js/custom.js' %}"></script>
     <script src="{% static 'fellchensammlung/js/toggles.js' %}"></script>
+    <script src="{% static 'fellchensammlung/js/jquery.min.js' %}"></script>
     <script type="module" src="{% static 'fellchensammlung/js/photoswipe.js' %}"></script>
 
 

src/fellchensammlung/templates/fellchensammlung/search.html

@@ -22,7 +22,6 @@
                     <input type="hidden" id="place_id" name="place_id">
                     <!--- https://docs.djangoproject.com/en/5.2/topics/forms/#reusable-form-templates -->
                     {{ search_form }}
-                    <ul id="results"></ul>
                     {% if searched %}
                         <div class="field is-grouped">
                             <button class="button is-primary" type="submit" value="search" name="search">
@@ -64,47 +63,65 @@
     </div>
 
     <script>
-        const locationInput = document.getElementById('id_location_string');
+        $(document).ready(function () {
-        const resultsList = document.getElementById('results');
+            const $locationInput = $("#id_location_string");
-        const placeIdInput = document.getElementById('place_id');
 
-        locationInput.addEventListener('input', async function () {
+            $locationInput.wrap("<div class='dropdown' id='location-result-list'></div>");
-            const query = locationInput.value.trim();
+            const dropdown = $("#location-result-list");
+            $locationInput.wrap("<div class='dropdown-trigger'></div>");
+            $("<div class='dropdown-content' id='results'></div>").insertAfter($locationInput);
+            const $resultsList = $("#results");
+            $resultsList.wrap("<div class='dropdown-menu'></div>");
+
+
+            $locationInput.on("input", function () {
+                const query = $.trim($locationInput.val());
 
                 if (query.length < 3) {
-                resultsList.innerHTML = ''; // Don't search for or show results if input is less than 3 characters
+                    dropdown.removeClass("is-active");
                     return;
                 }
 
-            try {
+                $.ajax({
-                // Search with preference to center of germany and only for cities
+                    url: "{{ geocoding_api_url }}/",
-                const response = await fetch(`{{ geocoding_api_url }}/?q=${encodeURIComponent(query)}&limit=5&lang={{ LANGUAGE_CODE_CURRENT }}&lat=51.95&lon=10.26&layer=city`);
+                    data: {
-                const data = await response.json();
+                        q: query,
+                        limit: 5,
+                        lang: "{{ LANGUAGE_CODE_CURRENT }}",
+                        lat: 51.95,
+                        lon: 10.26,
+                        layer: "city"
+                    },
+                    method: "GET",
+                    dataType: "json",
+                    success: function (data) {
+                        $resultsList.empty();
+                        dropdown.addClass("is-active");
 
                         if (data && data.features) {
-                    resultsList.innerHTML = ''; // Clear previous results
+                            const locations = data.features.slice(0, 5);
 
-                    const locations = data.features.slice(0, 5); // Show only the first 5 results
+                            $.each(locations, function (index, location) {
-
+                                const $listItem = $("<div>")
-                    locations.forEach(location => {
+                                    .addClass("dropdown-item")
-                        const listItem = document.createElement('li');
+                                    .addClass("result-item")
-                        listItem.classList.add('result-item');
+                                    .text(geojson_to_summary(location))
-                        listItem.textContent = geojson_to_summary(location);
+                                    .on("click", function () {
-
+                                        $locationInput.val(geojson_to_searchable_string(location));
-                        // Add event when user clicks on a result location
+                                        $resultsList.empty()
-                        listItem.addEventListener('click', () => {
+                                        dropdown.removeClass("is-active");
-
-                            locationInput.value = geojson_to_searchable_string(location); // Set input field to selected location
-                            resultsList.innerHTML = ''; // Clear the results after selecting a location
                                     });
 
-                        resultsList.appendChild(listItem);
+                                $resultsList.append($listItem);
                             });
                         }
-            } catch (error) {
+                    },
-                console.error('Error fetching location data:', error);
+                    error: function () {
-                resultsList.innerHTML = '<li class="result-item">Error fetching data. Please try again.</li>';
+                        $resultsList.html('<li class="result-item">{%  trans 'Error fetching data. Please try again.' %}</li>');
                     }
                 });
+            });
+        });
+
     </script>
 {% endblock %}