PHP Örneği - AJAX Canlı Arama

php 2020-03-03 01:26:58 12

AJAX Canlı Arama
Aşağıdaki örnek, siz yazarken arama sonuçlarını aldığınız canlı bir aramayı gösterir.

Canlı arama, geleneksel aramaya kıyasla birçok avantaja sahiptir:

Sonuçlar siz yazarken gösterilir
Yazmaya devam ettikçe sonuçlar daralıyor
Sonuçlar çok dar hale gelirse, daha geniş bir sonuç görmek için karakterleri kaldırın

<html>
<head>
<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 ActiveXOb ject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatech ange=function() {
   if (this.readyState==4 && this.status==200) {
     document.getElementById("livesearch" ).innerHTML=this.responseText;
     document.getElementById("li vesearch").style.border="1px solid #A5ACB2";
   }
 }
 xmlhttp.open("GET","livesearch.php?q="+str,true);
 xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="sh owResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

Kaynak kodu açıklaması:

Giriş alanı boşsa (str.length == 0), iş lev can arama yer tutucusunun içeriğini temizler ve işlevden çıkar.

Giriş alanı boş değilse, showResult () işlevi aşağıdakileri yürütür:

XMLHttpRequest nesnesi oluşturma
Sunucu yanıtı hazır olduğunda yürütülecek işlevi oluşturun
İsteği sunucudaki bir dosyaya gönderme
URL'ye bir parametre (q) eklendiğine (giriş alanının içeriğiyle) dikkat edin

  • Paylaşın: