Search code examples
javascripthtmlinputhtml-selectselectize.js

How do I interpret space characters in a text input as underscores when filtering options in a datalist?

I have an input element where the user is meant to type their time zone or select it from a dropdown menu. The time zone list consists of official TZ identifiers. These identifiers follow a specific format that uses underscores instead of spaces. When the user types in the input, the dropdown is filtered accordingly.

<body style='background-color: #252627;
             font-family: arial;'>

  <datalist id='time-zones'>
    <option>America/New_York</option>
    <option>America/Los_Angeles</option>
    <!-- etc. -->
  </datalist>

  <label for='time-zone-input'
         style='color: white'>Time zone</label><br>
  <input id='time-zone-input'
         type='text'
         list='time-zones'
         placeholder='Select or type'>

</body>

The problem is that when the user types "New York" or "Los Angeles" (using spaces) instead of "New_York" or "Los_Angeles" (using underscores), the option is not recognized. While I could add new options for the spaced equivalent of any time zones containing underscores, I'd prefer to not have several options representing the same time zone identifier, as it could confuse the user why both "America/New_York" and "America/New York" appear in the dropdown.

How can I configure the input or option elements such that "America/New_York" is shown in the dropdown regardless of whether the user types "New_York" or "New York"?

Side note: I am not actually using a datalist element with a text input element in my application. Rather, I am using the plugin Selectize which converts select elements into special select-one input elements, but I wanted to keep the question more general with the hope that it would therefore be easier to answer and that the solution would be similar.

Edit: See Scott Marcus's answer for the solution to this problem as presented. See my solution if you are using the Selectize plugin.

Solution

  • On the input event, you can replace spaces with underscores.

    document.querySelector("input").addEventListener("input", function(){
  this.value = this.value.replace(" ", "_");
});
    <body style='background-color: #252627;
             font-family: arial;'>

  <datalist id='time-zones'>
    <option>America/New_York</option>
    <option>America/Los_Angeles</option>
    <!-- etc. -->
  </datalist>

  <label for='time-zone-input'
         style='color: white'>Time zone</label><br>
  <input id='time-zone-input'
         type='text'
         list='time-zones'
         placeholder='Select or type'>

</body>