Question

我想在打字时启动微调器。当我停止这样做时，它应匹配用户名，如果用户名存在，则显示勾号图标，否则显示十字图标，最小字母也应为4.

我尝试使用两个图标，tick＆amp; amp;交叉。我保持最小字母条件为4并且它工作正常，当我删除那些刻度线或十字架应该消失的字符时，但它没有。

如何添加微调器以及如何避免此问题？

console.log($("#id_username"));
$("#id_username").keyup(function() {


  $("#lola").show();
  if (this.value.length < 4) {
    return
  }
  var username = $(this).val();
  console.log(username);
  $.ajax({
    url: '/ajax/validate_username/',
    type: "POST",
    data: {
      'username': username,
      csrfmiddlewaretoken: '{{ csrf_token }}',
    },
    dataType: 'json',
    success: function(data) {
      console.log(data);
      if (data.is_taken) {
        $("#lola").html('<i class="glyphicon glyphicon-remove" aria-hidden="true"></i>');
        $("#lola").css("background-color", "red");

      } else {
        $("#lola").html('<i class="glyphicon glyphicon-ok" aria-hidden="true"></i>');
      }
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group">

  <input class="form-control" id="id_username" name="username" placeholder="Username" type="text" required />

  <div class="input-group-addon" id="lola" style="display:none">
  </div>
</div>

Answer 1

如果长度为<4，您只是从函数返回。您需要隐藏它然后返回。

console.log($("#id_username"));
$("#id_username").keyup(function() {


  if (this.value.length < 4) {
    $("#lola").hide();
    return
  }
  $("#lola").show();
  var username = $(this).val();
  console.log(username);
  $.ajax({
    url: '/ajax/validate_username/',
    type: "POST",
    data: {
      'username': username,
      csrfmiddlewaretoken: '{{ csrf_token }}',
    },
    dataType: 'json',
    success: function(data) {
      console.log(data);
      if (data.is_taken) {
        $("#lola").html('<i class="glyphicon glyphicon-remove" aria-hidden="true"></i>');
        $("#lola").css("background-color", "red");

      } else {
        $("#lola").html('<i class="glyphicon glyphicon-ok" aria-hidden="true"></i>');
      }
    }
  });

});

如何在输入字段中键入时显示微调器

1 个答案: