清除输入元素时的 Enable/disable 按钮

Question

我有以下表格：

$('.search__input').keyup(function() {
          var empty = false;
            $('.search__input').each(function() {       
                if ($(this).val().length == 0) {
                    empty = true;
                }
            });
        
            if (empty) {
                $('.search__button').attr('disabled', 'disabled');
            } else {
                $('.search__button').removeAttr('disabled');
            }
      });
    });

<form class="search" action="my_url" autocomplete="on">
      <input type="search" class="search__input">
      <button type="submit" class="search__button">Search</button>
    </form>

我正在使用以下代码通过休息检索自动完成 api:

$(document).ready(function() {
  $(".search__input").autocomplete({
    delay: 250,
    source: function(request, response) {
      var suggestURL = "my_url";
      suggestURL = suggestURL.replace('%QUERY', request.term);
      $.ajax({
        method: "GET",
        dataType: 'json',
        url: suggestURL,
        success: function (data) {
           response(data);
        }
      });
    }
  });

但是，除了 keyup 之外，还有其他方法可以使输入元素为空。例如，chrome 有一个 x 按钮出现在输入元素中，可用于清除其内容。处理此类情况的正确方法是什么？如果当输入因任何原因变为空时有一个动作被触发，我会很高兴。

Answer 1

也许您可以使用 .onchange 而不是使用 .keyup，它会在输入字段的内容发生更改时触发（但是您可能必须离开输入字段才能进行更改）检测到）。

Answer 2

由于您的表单提交了搜索，如果您在输入中添加必填，当搜索字段为空时您将无法点击提交：

  <input type="search" class="search__input" required />

Answer 3

将代码放入命名函数中。然后您可以从 keyup 处理程序以及其他修改输入的地方调用它。

function enable_disable()() {
  var empty = false;
  $('.search__input').each(function() {
    if ($(this).val().length == 0) {
      empty = true;
    }
  });

  if (empty) {
    $('.search__button').attr('disabled', 'disabled');
  } else {
    $('.search__button').removeAttr('disabled');
  }
}

$('.search__input')
  .keyup(enable_disable)
  .autocomplete({
    delay: 250,
    source: function(request, response) {
      var suggestURL = "my_url";
      suggestURL = suggestURL.replace('%QUERY', request.term);
      $.ajax({
        method: "GET",
        dataType: 'json',
        url: suggestURL,
        success: function(data) {
          response(data);
        }
      });
    },
    close: enable_disable
  });

顺便说一句，如果您使用 AJAX 来获取建议，您可以只使用 URL 作为 source: 选项的值，您不必编写您自己的 $.ajax() 代码。

清除输入元素时的 Enable/disable 按钮

Enable/disable button when Input Element is Cleared

jquery

html

html-input