Comment faire écho une image avec jquery

Question

J'ai ce code et je voudrais le modifier si possible pour faire écho à une image au lieu du texte "est/non disponible". Je voudrais également me débarrasser du bouton et utiliser un onkeyup ou quelque chose de proche pour que l'utilisateur reçoive une notification en temps réel. Quelqu'un peut-il m'aider s'il vous plaît à faire ces changements?

$(document).ready(function() { 
     $("#btnUsername").click(function() { 
      var name = $("#txtUsername").val(); 
      var status = $("#divStatus"); 
      status.html("Checking....").removeClass(); 
      $.post("1.php", { username: name }, 
      function(data) { 
       if (data == "true") { 
        status.html(name + " Is Available!").addClass("green"); 
       } else { 
        status.html(name + " Is Not Available!").addClass("red"); 
       } 
      }); 
     }); 
    }); 

Answer 1

... 
status.html(name + "<img src='unavailable.png' />").addClass("red"); 
... 

Answer 2

Vous pourriez avoir votre déclaration de 1.php JSON, qui serait ensuite placé dans l'objet de données dans votre méthode de rappel. L'une des propriétés JSON pourrait être l'URL/chemin de l'image que vous pouvez ajouter à l'écran .. votre rappel pourrait ressembler à:

function(data) { 
    if (data) { 
     status.html($("<img/>").attr("src", data.image_path)); 
    } else { 
     status.html(name + " Is Not Available!").addClass("red"); 
    } 
}); 

Je ne sais pas ce que votre 1.php fait donc Je ne sais pas si cela est possible, mais voici comment je le ferais ..

EDIT Sauf si vous aviez une image que vous souhaitez afficher (comme si son toujours la même « le succès/échec » image , vous pouvez juste inclure le chemin plutôt que d'avoir votre 1.php le retourner)

Comme pour changer le clic k c'est juste une question de changer

$("#btnUsername").click(function() { 

à

$("#btnUsername").keyup(function() {