如何在輸入字段中輸入時顯示微調器

Question

我想在輸入時啓動微調器。當我停止這樣做，那麼它應該匹配用戶名，如果用戶名存在，顯示刻度圖標，否則顯示十字圖標，最小字母應該是4。

我試過用兩個圖標，勾選& cross。我將最小字母條件保留爲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>'); 
     } 
    } 
    }); 

});