Question

这是我的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>

我想要的是在点击范围.show-dropdown后显示下拉列表。到目前为止，这是我的代码：

$('.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}]); })

Answer 1

这是你想要的吗？在这里，我使用选择。可能这会对你有所帮助。

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

Answer 2

没有涉及触发或模拟鼠标点击或按键的解决方案。

但是，如果下拉按钮绝对位于文本区域上方，此技巧确实有效：

$('.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' );
});

单击带有数据列表的文本输入将使菜单出现，但是需要单击两次，因为第一个只是使其具有焦点。

这使文本输入字段在您将鼠标悬停在箭头按钮上时便会失去焦点，并为箭头提供了一个“ no-click”类（您在CSS中将其定义为“ pointer-events：none;”）。因此，第一次单击将它直接转到输入字段，然后显示菜单。

如何使用Jquery触发Datalist HTML的下拉列表

2 个答案: