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

Areeb Siddiqui notifications at github.com
Sun Feb 1 09:24:27 UTC 2026



<!--
Please read the contributing guidelines before making a PR:
  https://github.com/openstreetmap/openstreetmap-website/blob/master/CONTRIBUTING.md

Pay particular attention to the section on how to present PRs:
  https://github.com/openstreetmap/openstreetmap-website/blob/master/CONTRIBUTING.md#pull-requests
-->

### Description
Fixes #6368 

This PR adds a suggestion menu similar to Valhalla to give users options to choose from.
- Increase query limit from 1 to 5 to show more options
- Populate datalist with search results for user selection
- Add findDatalistOption to use cached coordinates when user selects from datalist, avoiding redundant queries
<img width="769" height="760" alt="Screenshot 2026-02-01 004347" src="https://github.com/user-attachments/assets/236c3772-e0d6-48f3-9420-b17ea0c2de33" />

It uses `<datalist>` that are not the best in appearance but is getting the job done. Problem with `<ul>`  and `<div>` was that options menu was getting clipped off by directions-output sidebar.

### How has this been tested?
- Manually tested in the browser by entering locations with multiple matches and selecting options  from the suggestion list
- Linting test

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/6765

-- Commit Summary --

  * Add datalist to display multiple search results

-- File Changes --

    M app/assets/javascripts/index/directions-endpoint.js (54)
    M app/assets/javascripts/index/directions.js (4)
    M app/views/layouts/_search.html.erb (6)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/6765.patch
https://github.com/openstreetmap/openstreetmap-website/pull/6765.diff

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

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


More information about the rails-dev mailing list