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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="wrapper"><selectclass="editableBox"><optionvalue="1">01:00</option><optionvalue="2">02:00</option><optionvalue="3">03:00</option><optionvalue="4">04:00</option><optionvalue="5">05:00</option><optionvalue="6">06:00</option><optionvalue="7">07:00</option><optionvalue="8">08:00</option><optionvalue="9">09:00</option><optionvalue="10">10:00</option><optionvalue="11">11:00</option><optionvalue="12">12:00</option><optionvalue="13">13:00</option><optionvalue="14">14:00</option><optionvalue="15">15:00</option><optionvalue="16">16:00</option><optionvalue="17">17:00</option><optionvalue="18">18:00</option><optionvalue="19">19:00</option><optionvalue="20">20:00</option><optionvalue="21">21:00</option><optionvalue="22">22:00</option><optionvalue="23">23:00</option><optionvalue="24">24:00</option></select><inputclass="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)