» » » » Ajax otomatik complete arama yapmak

Ajax otomatik complete arama yapmak

mehmetkalyci
mehmetkalyci 22-01-2017, 02:25
Merhaba arkadaşlar. Bir konuda takıldım yardım ederseniz sevinirim. Bir site tasarlıyorum ve 500 den fazla kategori var. Haliyle hepsine html link vermek çok sıkıntılı olacak. Eğer bunu arama çubuğunda halledebilirsem benim için büyük kolaylık olacak ancak yapamadım. İstediğim şey şu:
Şurada: (şehir) - Şunu ara (müze,park vs.)
Yani iki adımlı bir search box. Şurada kısmına şehrin ismini yazmaya başladığımda otomatik tamamlayıp seçmemi sağlayacak. Şunu ara kısmı html option fonksiyonu. Bunu nasıl yapabiliriz. Şimdiden teşekkür ederim.

Eğer anlatamadıysam aradığım şeyin kod versiyonu şöyle.

<div id="search_bar_container" style="z-index:9999">
                	<div class="container">
                            <div class="search_bar">
                            <span class="nav-facade-active" id="nav-search-in">
                            <span id="nav-search-in-content" style="">All tours</span>
                            <span class="nav-down-arrow nav-sprite"></span>
                            <select title="Search in" class="searchSelect" id="searchDropdownBox" name="tours_category">
                                <option value="All Tours"  title="All Tours">All Tours</option>
                                <option value="Museums" title="Museums">Museums</option>
                                <option value="Tickets" title="Tickets">Tickets</option>
                                <option value="Hotels" title="Hotels">Hotels</option>
                                <option value="Restaurants" title="Restaurants">Restaurants</option>
                            </select>
                            </span>
                            <div class="nav-searchfield-outer">
                                <input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox">
                            </div>
                            <div class="nav-submit-button">
                                <input type="submit" title="Cerca" class="nav-submit-input" value="Search">
                            </div>
                        </div><!-- End search bar-->
                    </div>
                </div><!-- /search_bar-->
Çözüldü İşleme Alındı Bekliyor Çözülemedi
Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.
3 779
MaRZoCHi 24 Ekim 2018 23:22
@mehmetkalyci⁠ daha basit şekilde yapılabilir. jQuery ile jаvascript kodu küçültülebilir.. XML yerine php üzerinden halledilebilir. Hatta basit bir modül ile admin panelden yönetilebilir bir şeyler yapılabilir.
Teşekkürler paylaşım için.

--------------------
0
mehmetkalyci 22 Ocak 2017 22:58
Arkadaşlar istediğim şeyi şu şekilde hallettim. Belki işinize yarar diye yazıyorum.

</head> etiketinden önce script kodlarını ekliyoruz.
<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";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>


Daha sonra form kodunu ekliyoruz. (tasarımı istediğiniz gibi editleyebilirsiniz.)
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>


Sıra geldi php kodlarına. Bir php dosyası oluşturup şunları içine yapıştırıyoruz.
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
  $hint="";
  for($i=0; $i<($x->length); $i++) {
    $y=$x->item($i)->getElementsByTagName('title');
    $z=$x->item($i)->getElementsByTagName('url');
    if ($y->item(0)->nodeType==1) {
      //find a link matching the search text
      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
        if ($hint=="") {
          $hint="<a href='" . 
          $z->item(0)->childNodes->item(0)->nodeValue . 
          "' target='_blank'>" . 
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
          $hint=$hint . "<br /><a href='" . 
          $z->item(0)->childNodes->item(0)->nodeValue . 
          "' target='_blank'>" . 
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>


Son olarak ana dizinde bir .xml dosyası oluşturmamız lazım. Bu xml dosyasının içine girdiğimiz her başlık ve link ajax'ın otomatik doldurmasına ve aranan şeyi 12 den vurmasını sağlayacak. Ne kadar çok alternatifli link ve başlık girerseniz o kadar iyi. Bu kısım biraz manuel ne kadar ekleyeceğiniz size kalmış. Ben sadece kategori ve alt kategori linklerini ekledim.
Örnek .xml dosyası şöyle.
<pages>
<link>
<title>Paris</title>
<url>http://localhost/paris</url>
</link>
<link>
<title>Paris gezilecek yerler</title>
<url>http://localhost/paris/paris-gezilecek-yerler</url>
</link>
<link>
<title>Paris şehir rehberi</title>
<url>http://localhost/paris/paris-şehir-rehberi</url>
</link>
<link>
<title>Paris sehir içi ulaşım</title>
<title>Paris şehir içi ulaşım</title>
<url>http://localhost/paris/paris-şehir-ici-ulasim</url>
</link>
</pages>


Sonuç şu şekilde oluyor.