入力フィールドに入力中にスピナーを表示する方法

Question

入力中にスピナーを開始したいと思います。私はそれをやめたら、ユーザー名と一致していなければなりません。そうでない場合はティックアイコンを表示してください。また、十字アイコンも表示してください。

私は2つのアイコン、tick &十字を使って試しました。私は最小の文字の状態を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>'); 
     } 
    } 
    }); 

});