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 Javas

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

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