Kurulum oldukça basit. Bir kaç ufak ayarlamalar ile sizde sorunsuz bir şekilde bu autocomplete özelliğini kullanabilirsiniz...
Öncelikle sitemize 3 ana dosyayı tanımlıyoruz.
// aşağıdaki kod ve dosyayı head tagları arasına katalım. <head> <link href="css/search.css" rel="stylesheet"> <script src="js/search.js"></script> //bu bölüme site adresini girip sonuna / bırakmayı unutmayın <script> var web_url = ''; </script> </head>Arama için kullandığımız form kodlarına gelelim. Örnek olarak aşağıdaki gibi olmalı.
<form action="" method="post" class="form-inline mt-12 mt-md-0" enctype="multipart/form-data">
//aşağıdaki nocsrf.php dosyasını inc, includes veya kaynak dosyaları hangi klasörde tutuyorsak o dizine atıp include içinde bu yolu gösterelim. Ben örnek olsun diye nocsrf.php dosyasını inc klasörüne kattım.
<?php
include('inc/nocsrf.php');
$search_token = NoCSRF::generate( 'csrf_token' );
?>
//ünretsiz token üretecek kodumuz. Bu sayede apisiz sınırsız bir şekilde bu fonksiyonu kullanabiliriz.
<input type="hidden" name="csrf_token" value="<?php echo $search_token; ?>">
//arama yaptırdğınız text bölümünde mutlama id kısmı query olsun ve autofocus ile autocomplete kodlarını da eklemeyi unutmayın.
<input autofocus="autofocus" autocomplete="off" id="query" type="text" name="ara" class="form-control col-md-10" style="margin-right:10px;" placeholder="Arayın..." required>
<input type="submit" id="btn" class="btn btn-outline-success my-12 my-sm-0" style="margin-top:10px;" value="Ara">
</form>Tek bir ayar kısmı kaldı. search.js dosyasının içinde arama yapmak için kullandığımız parametreleri ayarlayacağız.
(jQuery), $(window).load(function() {
$("#query").autocomplete({
source: function(e, t) {
var a = "//suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=" + encodeURIComponent(e.term) + "&format=5&alt=json&callback=?";
$.getJSON(a, function(e) {
var a = [];
$.each(e[1], function(e, t) {
a.push(t[0])
}), t(a)
})
},
select: function(e, t) {
return location.href = web_url+"index.php?ara=" + t.item.label.replace(/s+/g, '+')
},
delay: 200
})
});Yukarıda görüldüğü üzere location.href kodu vardır. Bu kodda bulunan index.php benim arama için kullandığım dosyayı ifade eder. Sizde aramalarınızı hangi dosyada yaptırıyorsanız o dosyanın adını yazın. Örneğin search.php veya seo link var ise sadece search yazmanız yeterli olacaktır. index.php?ara bölümünde olan "ara" kodu sizin arama yaptırdığınız formun text name="" değeridir. Yukarıdaki örnek formda da gördüğünüz üzere benim text name="ara" değerim "ara" dır...Kurulum bu kadar. Şimdi örnek olarak hazırladığım kodu indirebilir demoyu inceleyebilirsiniz. Bu sistem post metodu ile değil get metodu ile çalışmaktadır.
Demo: https://playmusic.pw/demo/google-arama
Gelişmiş Demo: https://videomp3indir.net/muzik-video-ara
Kaynak kodları indir: https://playmusic.pw/demo/google-arama/google.zip
Not: Demoda sadece en çok arama yapılan kelimeler gösterilir. Arama yapmaz. Detaylı gelişmiş örnekte arama yapabilir test edebilirsiniz. Ayrıca bu sistem tüm dilleri desteklemektedir.
Örnek Görünüm:
Ekstra Not:
İsterseniz kendi sisteminizi geliştirebilirsiniz. Aşağıda vereceğim json url ile en çok arananları listeleyebilir ve değişkene atabilirsiniz.
$kelime = "emrah karaduman"; //kelimeyi url encode içine atıp google'nin tanıdığı yapıya çeviriyoruz. Yoksa arama yapmaz. $search_term = urlencode($kelime); $json_url = "//suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=$search_term&format=5&alt=json&callback=?";Yukarıdaki kodu da json parse işlemleri ile dilediğiniz gibi kelimeleri sıralayabilirsiniz.
