[openstreetmap/openstreetmap-website] Add datalist to display multiple search results (PR #6765)

[Pablo Brasero]

@pablobm commented on this pull request.

I think this looks good. Something that annoys me a bit is that, in Firefox, selecting from the datalist doesn't trigger a `change`, so the user has to submit again (doesn't happen on Chrome). No idea if there's a good solution that doesn't involve getting too clever with events (which I wouldn't want).

> @@ -24,8 +24,8 @@ OSM.Directions = function (map) {
   };
 
   const endpoints = [
-    OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { icon: "start", color: "var(--marker-green)" }, endpointDragCallback, endpointChangeCallback),
-    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { icon: "destination", color: "var(--marker-red)" }, endpointDragCallback, endpointChangeCallback)
+    OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { icon: "start", color: "var(--marker-green)" }, endpointDragCallback, endpointChangeCallback, $("datalist[id='from_suggestions']")),
+    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { icon: "destination", color: "var(--marker-red)" }, endpointDragCallback, endpointChangeCallback, $("datalist[id='to_suggestions']"))

Since the `datalist` is referenced from the input via the `list` attribute, I think it's to to use that from within `OSM.DirectionsEndpoint` instead of passing it explicitly here.

> @@ -63,7 +64,8 @@
                 </svg>
               </span>
             </div>
-            <%= text_field_tag "route_to", params[:to], :placeholder => t("site.search.to"), :autocomplete => "on", :class => "form-control py-1 px-2 ps-4", :dir => "auto" %>
+            <%= text_field_tag "route_to", params[:to], :placeholder => t("site.search.to"), :autocomplete => "off", :class => "form-control py-1 px-2 ps-4", :dir => "auto", :list => "to_suggestions" %>
+          <datalist id="to_suggestions"></datalist>

The indent is slightly off here:


```suggestion
            <datalist id="to_suggestions"></datalist>
```

>      endpoint.setValue(value);
   }
 
-  endpoint.setValue = function (value) {
+  function findDatalistOption(value) {
+    const options = datalist[0].querySelectorAll("option");
+    for (const option of options) {
+      if (option.value === value) {
+        return option;
+      }
+    }
+    return null;

Unnecessary line.

> +      return;
+    }
     endpoint.setValue(value);

In my opinion an explicit `else` would read better:

```suggestion
    } else {
      endpoint.setValue(value);
    }
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6765#pullrequestreview-3744839581
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6765/review/3744839581 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260203/a4c50be1/attachment.htm>