清除输入元素时启用/禁用按钮

Posted 2023-03-05

【中文标题】清除输入元素时启用/禁用按钮

【英文标题】：Enable/disable button when Input Element is Cleared

【发布时间】：2019-11-26 16:42:45

【问题描述】：

我有以下表格：

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

我正在使用以下代码通过 rest 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 按钮出现在 input 元素中，可用于清除其内容。处理此类情况的正确方法是什么？如果输入因任何原因变为空时触发一个动作，我会很好。

【问题讨论】：

使用.on('input',function()) 代替keyup。

【参考方案1】：

将代码放在命名函数中。然后您可以从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() 代码。

【讨论】：

感谢您的回复！我的其余 URL 的格式为“url.com/startswith?%QUERY”，然后我在函数中使用了建议 URL.replace('%QUERY', request.term)。我仍然可以仅使用 url 设置源吗？如果可以，如何设置？

您需要更改获取参数的方式。它以YOURURL?term=XXX 发送，其中XXX 是搜索词。

您可以使用重写规则将url.com/startswith?term=XXX 重写为url.com/startswith?XXX

【参考方案2】：

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

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

【参考方案3】：

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