PHP AJAX实时搜索-放置GIF加载程序图标

目前我正在使用此脚本进行实时搜索

https://www.w3schools.com/php/php_ajax_livesearch.asp

但问题是，当用户键入内容时，我希望在搜索框的正确位置加载gif图像，并在显示结果时将其隐藏

---

谢谢

您需要在

showResult

函数中添加逻辑：

<script>
function showResult(str) {
  if (str.length==0) { 
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
    /// HERE hide the image ----------------------------
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
  /// HERE show the image ---------------------------
}
</script>

函数显示结果（str）{
如果（str.length==0）{
document.getElementById（“livesearch”）.innerHTML=“”；
document.getElementById（“livesearch”）.style.border=“0px”；
返回；
}
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“livesearch”）.innerHTML=this.responseText；
document.getElementById（“livesearch”）.style.border=“1px solid#A5ACB2”；
}
///这里隐藏图像----------------------------
}
open（“GET”，“livesearch.php？q=“+str，true”）；
xmlhttp.send（）；
///这里显示图像---------------------------
}

---

您知道创建IMG元素并将其附加到输入框旁边的代码吗？

您好，谢谢您的回答，您能提供一个关于JSFIDLE或codepen的工作示例吗。