在数据列表中过滤选项时，如何将文本输入中的空格字符解释为下划线？

问题描述 投票：0回答：1

我有一个输入元素，用户可以在其中输入他们的时区或从下拉菜单中选择它。时区列表由官方 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”（使用下划线）时，该选项无法识别。虽然我可以为包含下划线的任何时区的间隔等效项添加新选项，但我不希望有多个代表相同时区标识符的选项，因为它可能会让用户感到困惑，为什么同时使用“America/New_York”和“America/”纽约”出现在下拉列表中。

如何配置输入或选项元素，以便无论用户输入“New_York”还是“New York”，下拉列表中都会显示“America/New_York”？

旁注：我实际上并没有在应用程序中使用带有文本 

datalist
元素的 
input
元素。相反，我使用插件 Selectize 将 
select
元素转换为特殊的 select-one 
input
元素，但我想让问题更笼统，希望因此更容易回答，并且解决方案是类似。

javascript html validation input html-select
1个回答
0
投票

在 

input
事件中，您可以用下划线替换空格。

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.