Question

我有一个带有关联datalist的html5输入，我想在打开选项时清除输入，以便所有这些都可见（未经过滤）。我怎么能在Javascript中这样做？（使用jQuery或不使用）

例如（https://stackoverflow.com/a/29755076/2190425）

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

当我点击下拉箭头，然后选择波士顿，然后再次点击下拉箭头 - 在第二次点击后我希望输入为空（因为它会将选项过滤到输入的一个选项 - 波士顿），所以我需要某种事件或某些东西可以让我清空输入，但它不能是input事件，因为当你点击下拉列表时没有任何输入。

Answer 1

您可以使用可编辑的下拉菜单作为数据列表，您的要求将会完成。下面给出了可编辑下拉代码。

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

 public $accessType = 'offline';
public $approvalPrompt = 'force';

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)

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

2 个答案: