Question

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

<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时，click li事件应该会被触发，然后ul应该被隐藏。

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

在隐藏ul之前触发li的click事件

2 个答案: