如何配置datalist，使输入空格可匹配含下划线的时区选项？

我有一个输入元素，用户可在此输入时区或从下拉菜单中选择。时区列表采用官方TZ标识符，这类标识符使用下划线而非空格。用户输入时，下拉菜单会相应过滤。

<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>

问题在于，当用户输入“New York”或“Los Angeles”（含空格）而非“New_York”或“Los_Angeles”（含下划线）时，无法匹配到对应选项。虽然可以添加带空格的等效时区选项，但不希望同一时区出现多个选项以免混淆用户。

如何配置输入或选项元素，让用户无论输入“New_York”还是“New York”，下拉菜单都能显示“America/New_York”？

补充说明：实际项目中我并未使用datalist搭配text input，而是使用Selectize插件将select元素转换为特殊的select-one input元素，为使问题更通用故采用上述示例。

编辑：若使用本文示例方案，请参考Scott Marcus的回答；若使用Selectize插件，请参考我整理的解决方案内容。

内容的提问来源于stack exchange，提问作者Sim