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

Question

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.

The way you solve this with your plugin and the way you solve this with the example you provided are going to look completely different. I’m not sure the answers you’ll get will even be applicable to your specific use case. It would probably behoove you more personally to update your question to be reflective of what you’re working with. — esqew
– esqew, Commented Apr 24, 2024 at 18:32
@esqew I imagine that could very well end up being the case, although I'm happy to tinker with Selectize using the principles of the generic solution, as that has worked so far with other challenges I've encountered with the plugin. That said, I will update the question or create a new one to fit my exact situation if that becomes necessary. — Sim
– Sim, Commented Apr 24, 2024 at 18:49

Scott Marcus · Accepted Answer · 2024-04-24 19:12:27Z

0

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>

answered Apr 24, 2024 at 19:12

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sim Over a year ago

Thanks! This is a solid solution if using a text input with a list. A note for others that this will not quite work with Selectize because the typed input is accessed from a different node. See my solution that builds on this one.

Sim · Accepted Answer · 2024-04-25 23:00:39Z

Selectize solution

Scott Marcus's answer works well if using a text input with a list, but this didn't work for inputs created with the Selectize plugin. After playing around with the Selectize API, I landed on the following solution:

$('#time-zone-selection').selectize({
  onType: function() {
    convertSpacesToUnderscores(this);
  }
});

function convertSpacesToUnderscores(selectizeInstance) {
  const inputText = selectizeInstance.getTextboxValue();
  const convertedInputText = inputText.replaceAll(' ', '_');
  selectizeInstance.setTextboxValue(convertedInputText);
}

body {
  background-color: #252627;
  font-family: arial;
}

label {
  color: white;
}

.selectize-control {
  width: 15rem;
}

<head>
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
        integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer">
</head>

<body>

  <label for='time-zone-selection'>Time zone</label><br>

  <select id='time-zone-selection'>
    <option value=''>Select or type</option>
    <option>America/New_York</option>
    <option>America/Los_Angeles</option>
  </select>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js'></script>

</body>

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related