所以我做了一个自定义选择器

<div class="search">
                <input class="custom-selector" type="text" autocomplete="off" >
                <ul class="custom-options hidden">
                    <li>New York</li>
                    <li>Moscow</li>
                    <li>Baku</li>
                </ul>
            </div>


每当我专注于输入时,隐藏的类(仅具有display:none;)就会被删除,而在blur(unfocus)上它会被添加回来

$('.custom-selector').focus(function() {
    $(".custom-options").removeClass("hidden");
}).blur(function() {
    $(".custom-options").addClass("hidden");
})


下一步,我需要一个onclick函数来获取li值并将其复制到输入中,但是每当我单击li时,输入都变得没有焦点,并且onclick函数无法在显示器上工作,我发现一个解决方案是不透明0而不是对隐藏类不显示任何内容,是否有更优化和正确的方法来解决此问题?

最佳答案

编辑:您可以添加timeout吗?



$('.custom-selector').focus(function() {
  $(".custom-options").removeClass("hidden");
}).blur(function() {
  setTimeout(function () { $(".custom-options").addClass("hidden") }, 350);
})

$('.custom-options > li').click(function(e) {
  $('.custom-selector').val($(this).text());
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
  <input class="custom-selector" type="text" autocomplete="off">
  <ul class="custom-options hidden">
    <li>New York</li>
    <li>Moscow</li>
    <li>Baku</li>
  </ul>
</div>

关于javascript - 由于显示属性,自定义选择器不会单击,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60916362/

10-12 01:33
查看更多