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
1.kapitalist sistemin insanlara atmis ol... olacaklar 2021-01-07 22:35:42
25 kasim 2020 kamil koc istanbul. Corum ... olacaklar 2020-11-25 04:35:53
cast oyuncularin bir arada toplandigi, ... cast 2020-11-07 20:31:00
BARAN - İlaç (Official Video) Baran'Ä... baranofficial 2020-08-07 19:59:01
Vatanım Gibisin Eserimizi Kliplendirdik... bulentyigit 2020-08-02 00:09:47
iddalara gore Dr. Özgür Kartal yuva yi... doktor 2020-07-26 00:56:28
Karpuz isimli şarkıma oldukça yoğun ... eceronay 2020-03-22 15:30:36
AdSense için hazırlanmış web sitesi... Adsense 2020-01-18 22:00:36
iddalara gore Dr. Özgür Kartal yuva yi... doktor 2020-07-26 00:56:28
https://www.youtube.com/watch?v=zsGPzAFa... sude 2020-03-31 03:11:42
Sizler için halka ışık ürün incele... serhatyigitcetin 2020-03-09 11:52:05
Cennetin Göz yaslarindan bir kare burd... oykukizil 2020-01-26 01:46:33