How to trigger Dropdown of Datalist HTML using Jquery

Question

Here is my HTML:

<input type="text" name="" class="customize-input clickDp" list="dpA1" id="dropdown-Account">
<span class="show-dropdown"><img src="images/click-dp.png"></span>
<datalist id="dpA1">
    <option value="1"/>
    <option value="2"/>
</datalist>

What I want is to show the dropdown once I click the span .show-dropdown. So far here is my code:

$('.show-dropdown').on('click',function(){
   var e = $.Event("keydown");
   e.which = 40; // # Some key code value
   e.keyCode = 40
   $(".clickDp").trigger(e);
   //$(".clickDp").trigger('keyup', [{preventDefault:function(){},keyCode:40}]); })

Dinesh undefined · Accepted Answer · 2017-06-29 05:05:53Z

1

Is this you wanted? Here i used select. May be this will help you.

$('.show-dropdown').on('click',function(){

        var $target = $("#dpA1");
        var $clone = $target.clone().removeAttr('id');
        $clone.val($target.val()).css({
            overflow: "auto",
            position: 'absolute',
            'z-index': 999,
            left: $target.offset().left,
            top: $target.offset().top + $target.outerHeight(),
            width: $target.outerWidth()
        }).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() {
            $target.val($clone.val());
        }).on('click blur keypress',function(e) {
         if(e.type !== "keypress" || e.which === 13)
            $(this).remove();
        });
        $('body').append($clone);
        $clone.focus();

   
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/eduardolundgren/jquery-simulate/master/jquery.simulate.js"></script>

<select id="dpA1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>



<span class="show-dropdown"><img src="images/click-dp.png"></span>

answered Jun 29, 2017 at 5:05

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ajbee Over a year ago

Is there a way to use only datalist?

blerg · Accepted Answer · 2020-02-26 21:06:52Z

No solution involving triggering or simulating mouse clicks or key presses is going to work.

But if the dropdown button is absolutely positioned over the text area, this trick does work:

$('.dropdown .arrow').on( 'mouseenter', function( e ) {
  $( e.target ).parent().find( 'input' )[0].focus();
  $(e.target ).addClass( 'no-click' );
});
  $('.dropdown').on( 'mouseleave', function( e ) {
  $('.dropdown .arrow').removeClass( 'no-click' );
});

Clicking a text input with a datalist will cause the menu to appear, but it takes two clicks because the first one just gives it the focus.

This makes the text input field steal focus as soon as you mouse over the arrow button and gives the arrow a 'no-click' class ( which you've defined in CSS as 'pointer-events:none;" ). So the first click goes right through it to the input field, and the menu shows up.

Collectives™ on Stack Overflow

How to trigger Dropdown of Datalist HTML using Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related