隐藏ul之前李的点击事件

Fire click event of li before hiding ul

本文关键字：事件 ul 隐藏      更新时间：2023-09-26

我有一个文本框，然后是一个无序列表，如下所示：

<div>
    <input type="text" />
    <button>Go</button>
</div>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

现在在文本框的模糊事件中：

$('input').on('blur', function() {
    $('ul').hide();
});

上面的代码运行得很好。

我正在尝试制作类似combobox的东西。

所以，我想要的行为是：

  • 当文本框失去焦点时，建议应该隐藏（如上图所示）
  • 当单击某个建议时，它的单击事件应该触发，然后该建议的文本应该填写在文本框中，然后所有建议都应该隐藏

    • 因此，对于第二个功能，当我单击任何li时，li的click事件应该激发，然后ul应该隐藏。

    var items = ["Apple", "Banana", "Celery", "Peach", "Plum"];
$('input').on('input', function() {
  var text = $(this).val();
  $('ul').show().empty().append(items.filter(function(item) {
    return item.match(new RegExp(text, 'i'));
  }).map(function(text) {
    return $('<li>').text(text);
  }));
});
$('input').on('blur', function() {
  $('ul').fadeOut();
});
$('ul').on('click', 'li', function() {
  $('input[type=text]').val($(this).text());
  $('ul').hide();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <input type="text" />
    <button>Go</button>
</div>
<ul>
</ul>

    只需更新文本框，然后将ul隐藏在li的同一点击事件中。

    $("li").on("click", function() {
  $("input[type=text]").val(this.text());
  $("ul").hide();
});

    如果jQuery不完美，很抱歉——我不经常使用它。无论如何，这应该会有所帮助。

    相关文章：