Cara Membuat Keyword Sugestion di Menu Pencarian Situs dari WP (Wordpress)

Sunday, November 20, 2016

Cara Membuat Keyword Sugestion di Menu Pencarian Situs dari WP (Wordpress). Cara ini baru bisa digunakan untuk Thema WP yang sudah memiliki Menu Pencarian di bagian Header-nya. 

Caranya: 

Masuk kebahagian Dashboard WP lalu kemudian Buka Thema Editor dan Pilih  halaman (header.php)

Selanjutnya jika Form Pencariannya sama seperti ini

<form action="" class="form-group">

<label for="s" class="sr-only">Search Query</label>

<div class="input-group">

<input type="search" name="s" class="form-control" placeholder="Search...">

<div class="input-group-btn"><button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button></div>

</div>

</form>

Maka dirubah sedikit menjadi:

<form action="" class="form-group">

<label for="s" class="sr-only">Search Query</label>

<div class="input-group">

<input type="search" name="s" class="form-control" placeholder="Search..." name="s" id="youtube">

<div class="input-group-btn"><button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button></div>

</div>

</form>

jadinya cuma menambah kode yang berwarna merah saja.

Semula: 

<input type="search" name="s" class="form-control" placeholder="Search...">

Menjadi:

<input type="search" name="s" class="form-control" placeholder="Search..." name="s" id="youtube">

Langkah Terakhir

Tambahkan Skript dibawah ini dan diletakkan persis diterakhir kode yang ada pada halaman  (header.php)

Skriptnya adalah:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>;
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"; />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>;
    <script>
        $(document).ready(function(){
            $("#youtube").autocomplete({
    source: function(request, response){
        /* Google Developer ID (optional) */
        var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
        /* Search keyword */
        var query = request.term;
        /* youtube sorgusu */
        $.ajax({
            url: "http://suggestqueries.google.com/complete/search?hl=id&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",  
            dataType: 'jsonp',
            success: function(data, textStatus, request) { 
               response( $.map( data[1], function(item) {
                    return {
                        label: item[0],
                        value: item[0]
                    }
                }));
            }
        });
    },
    /* You can use transaction is selected here to */
    select: function( event, ui ) {
        $.youtubeAPI(ui.item.label);
    }
    });
 
            $('button#submit').click(function(){
    var value = $('input#youtube').val();
        $.youtubeAPI(value);
    });
 
            $.youtubeAPI = function(kelime){
    var sonuc = $('#sonuc');
    sonuc.html('Arama ger?eklestiriliyor...');
    $.ajax({
        type: 'GET',
        url: 'http://gdata.youtube.com/feeds/api/videos?q=' + kelime + '&max-results=15&v=2&alt=jsonc',
        dataType: 'jsonp',
        success: function( veri ){
            if( veri.data.items ){
                sonuc.empty();
                $.each( veri.data.items, function(i, data) {
                    sonuc.append('<div class="youtube">\
                        <img src="' + data.thumbnail.sqDefault + '" alt="" />\
                        <h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id + '\', \'' + data.content[5] + '\')">' + data.title + '</a></h3>\
                        <p>' + data.description + '</p>\
                    </div>\
                    <div class="youtubeOynat" id="' + data.id + '"></div>');
                });
            }
            else {
                sonuc.html('<div class="hata"><strong>' + kelime + '</strong> ile ilgili hi? video bulunamadi!</div>');
            }
        }
    });
    }
            $.youtubePlay = function(yid, frame){
    $('.youtubeOynat').slideUp().empty();
    $('#'+yid).slideDown().html('<iframe src="'+ frame +'&autoplay=1" style="width: 100%; box-sizing: border-box; height: 300px" />');
    }
        });
    </script>