打开选项时如何清除数据列表输入？

Question

我有一个 html5 输入和关联的数据列表，我想在打开选项时清除输入，以便所有这些都可见（未过滤）。我怎么能在 Javascript 中做到这一点？ (有无jQuery)

例如()

<input type="text" name="city" list="cityname">
<datalist id="cityname">
  <option value="Boston">
  <option value="Cambridge">
</datalist>

当我单击下拉箭头时，然后 select 波士顿，然后再次单击下拉箭头 - 在第二次单击后我希望输入为空（因为它将选项过滤为一个选项输入 - 波士顿），所以我需要某种事件或允许我清空输入的东西，但它不能是 input 事件，因为当您单击下拉菜单时还没有输入任何内容。

Answer 1

您可以使用可编辑的下拉菜单，它将用作数据列表，您的要求将得到满足。下面给出了可编辑下拉列表的代码。

$(document).ready(function(){
   
    $(".editableBox").change(function(){         
        $(".timeTextBox").val($(".editableBox option:selected").html());
    });
});

.editableBox {
    width: 75px;
    height: 30px;
}

.timeTextBox {
    width: 54px;
    margin-left: -78px;
    height: 25px;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <select class="editableBox">        
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="23">23:00</option>
        <option value="24">24:00</option>
    </select>
    <input class="timeTextBox" name="timebox" maxlength="5"/>
</div>

Answer 2

我所做的只是通过双击清除输入。这样至少用户可以选择，如果被告知 - 使用起来很舒服（对于新用户来说，它可能不是一个解决方案）。

这是我使用的代码：

# datalist does not fire change event, therefore we need this exception, the if is for avoiding duplicate call with keyup
$(@dom.search_fields).find('input.datalist_filter').on 'input', (e) =>
  @handleInput(e) if e.target.value.length and
                    ($(e.target.list).find('option').filter -> this.value == e.target.value).length

# it does not fire event if you set the value of input manually, therefore we need to call handleInput directly here
$(@dom.search_fields).find('input.datalist_filter').on 'dblclick', (e) =>
  e.target.value = ''
  @handleInput(e)

打开选项时如何清除数据列表输入？

How to clear datalist input when options are opened?

html

html-datalist