How to clear datalist input when options are opened?

问题

I have a html5 input with associated datalist, I want to clear the input when the options are opened so that all of them could be visible (unfiltered). How could I do this in Javascript? (with jQuery or not)

For example (https://stackoverflow.com/a/29755076/2190425)

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

When I click the dropdown arrow, then select Boston and after that click the dropdown arrow again - after this second click I want the input to be empty (because it filters the options to the one option that's typed in - Boston), so I need some kind of event or something that would allow me to empty the input, but it can't be input event, because nothing is input when you click the dropdown yet.

回答1:

You can go with editable dropdown which will work as datalist and your requirement will be accomplished. The code for editable drop down given below.

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

回答2:

What I did was simply clean the input on double click. This way at least the user has the option and if informed - the usage is quite comfortable (for new users it could less of a solution).

Here is the code I used:

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

来源：https://stackoverflow.com/questions/39303389/how-to-clear-datalist-input-when-options-are-opened

标签

html5

html-datalist