Member Avatar for Niloofar24

Hi.
I want to create a drop-down menu for user's location (choosing cities) in the form.
I know how to create it, but as I want a long list of citis, so is there any other way to create it? Or do i have to create each city one by one?!

  • 2 Contributors
  • 1 Reply
  • 275 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by pixelsoul

Dani AI

Generated

Good question, . A giant HTML <select> with thousands of <option> elements is a usability and performance problem on desktop, and a nightmare on mobile and for screen readers. is right to suggest not hard‑coding everything — the next step is choosing how to present a long list so users can find their city quickly.

A few practical patterns that work well:

  • Two-step narrowing (country → state → city) keeps each list small and predictable.
  • Autocomplete / combobox: replace the long select with an input that queries a backend as the user types. Require a minimum number of characters (2–3), debounce keystrokes (200–300 ms), and return a limited result set (10–20). Cache recent queries client-side.
  • Lightweight HTML fallback: use datalist only for short lists or as a progressive enhancement; it is not suitable for thousands of entries.

Minimal examples (starting points):

Simple datalist (small lists only):

<input list="cities" name="city">
<datalist id="cities">
  <option value="San Francisco">
  <option value="San Diego">
  <option value="Sacramento">
</datalist>

Scalable autocomplete (client/server sketch):

// debounce helper + fetch suggestions from /searchCities?q=...
debounceFetch(inputEl) {
  // wait ~250ms after typing, send q, update dropdown with top 10 results
}

Implementation tips and gotchas:

  • Server: index city names (and alternative names), and search by prefix and fuzzy match for typos; return IDs plus display text and region.
  • UX: show country/state in results to disambiguate duplicates (e.g., Springfield, IL). Allow manual entry if city is missing.
  • Accessibility: implement ARIA combobox roles, keyboard navigation, and clear labels.
  • Performance: avoid rendering thousands of DOM nodes — use virtualization or paginate results. If using a third‑party places API, watch rate limits, API keys, and privacy implications.

If you share the stack you’re using (plain HTML, React, etc.), a short, concrete example can be provided for that environment.

Member Avatar for pixelsoul

You could build a database/flat file of the cities yourself, or you could use an API that pulls the cities in as a user types them as well.
For example, here is an API that does just that

In addition to that, I believe http://www.geonames.org/ has an API as well for all types of geo data.

Of course there are drawbacks to using a public API, such as reliability, etc.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.