Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 inspecting the Selectize functionality closer, I came up with the following working solution. See inline comments for details.

    $('#time-zone-selection').selectize();
replaceSpacesWithUnderscoresOnInput('time-zone-selection');

function replaceSpacesWithUnderscoresOnInput(selectId) {
  const selectizeControl = document.getElementById(selectId).nextElementSibling;  // when a select tag is passed to Selectize, it is removed from the document and replaced with a div.selectize-control

  selectizeControl.addEventListener('input',
    function() {
      const userInput = document.getElementById(`${selectId}-selectized`);  // the typed user input is relegated to the 'selectized' version of the original select ID
      userInput.value = userInput.value.replaceAll(' ', '_');  // in addition to replacing singular typed underscores, replaceAll will convert all spaces in pasted text to underscores
    }
  );
}
    <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 style='background-color: #252627;
             font-family: arial;'>

  <label for='time-zone-selection'
         style='color: white'>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>


  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search