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