How to clear datalist input when options are opened?

Question

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.

Can you elaborate your question with example. Not able to understand what you want to accomplish — Abhijeet, Sep 03 '16 at 08:31
Hello @Aurimas , I have the same problem. How did you solve it? — alebupal, Sep 06 '17 at 16:29

Abhijeet · Answer 1 · 2016-09-03T13:16:42.537

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>

Thanks, it looks good, but I specifically want to work with the native html5 control, since it looks really nice in my application (displaying number values and names in the dropdown). — Aurimas, Sep 03 '16 at 15:14
Are you going to use it or You are checking into datalist part. — Abhijeet, Sep 03 '16 at 15:24
I am using it! .. it's just that I'm developing for a private company so I don't want to post code examples from it. — Aurimas, Sep 04 '16 at 08:03
No, I mean I'm using datalist, but I'm not using your answer, it's not a good fit for me. I voted it up though! — Aurimas, Sep 04 '16 at 08:13
ok no problem . Can you provide solution you are using It will me help me as well — Abhijeet, Sep 04 '16 at 08:34

score 1 · Accepted Answer · answered Sep 06 '17 at 21:23

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)

How to clear datalist input when options are opened?

2 Answers2

Linked