Membuat Pencarian langsung atau Live Search - OTODIDAK27

Membuat Pencarian langsung atau Live Search

fitur ini adalah yang harus dan harus dimiliki untuk setiap situs web.
Tujuannya adalah membuat pencarian langsung untuk memudahkan pengguna mencari artikel di situs anda.

Pada artikel ini kita akan belajar cara membuat pencarian langsung untuk blog menggunakan feed blog post api.

1. Kode CSS
<style>
    .search-wrap-ensikology {
        position: relative;
        width: 400px
    }
    .search-form-ensikology {
        position: relative
    }
    .searchform-ensikology .searchbar-ensikology {
        outline: none;
        width: 90%;
        float: left;
        display: block;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }
    .searchform-ensikology .searchbar-ensikology:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    }
    .searchform-ensikology .searchbar-ensikology::-moz-placeholder {
        color: #999;
        opacity: 1;
    }
    .searchform-ensikology .searchbar-ensikology:-ms-input-placeholder {
        color: #999;
    }
    .searchform-ensikology .searchbar-ensikology::-webkit-input-placeholder {
        color: #999;
    }
    .searchform-ensikology .searchbar-ensikology::-ms-expand {
        background-color: transparent;
        border: 0;
    }
    .search-out-ensikology {
        width: 100%;
        top: 100%;
        left: 0;
        display: none;
        border: 1px solid #ccc;
        position: absolute;
        z-index: 100;
        background: #FFFFFF;
        box-shadow: rgba(0, 0, 0, 0.117647) 0 6px 10px;
    }
    .search-label-ensikology {
        display: none;
        font-size: 14px;
        display: block;
        padding: 10px
    }
    .search-item-ensikology {
        overflow: auto;
        padding: 10px 12px;
        border-bottom: 1px solid #ddd;
    }
    .search-item-ensikology img {
        float: left;
        width: 70px;
        height: 50px;
        margin-right: 10px;
    }
    .search-item-ensikology a {
        font-size: 17px;
        color: #222;
        display: block;
        width: 100%;
        text-decoration: none;
    }
    .more-result-ensikology {
        text-decoration: none;
        color: #111;
    }
    .more-result-ensikology:hover {
        opacity: .8;
        transition: .3s
    }
    .more-result-ensikology b {
        color: #222;
        text-transform: uppercase
    }
    .searchsubmit-ensikology {
        width: 39px;
        background: transparent;
        font-family: fontawesome;
        height: 34px;
        -webkit-appearance: button;
        cursor: pointer;
        outline: 0;
        border-radius: 3px;
        border: 1px solid #ccc;
    }
    .search-label-ensikology {
        font-size: 16px
    }
    .more-result-ensikology-wrap {
        padding: 10px;
        background: rgba(245, 245, 245, .8);
        text-align: center;
        position: relative
    }
    #close-search {
        text-decoration: none;
        color: #111;
        position: absolute;
        right: 0px;
        top: 0px;
        padding: 0 12px 0 10px;
        font-weight: bold;
        font-size: 34px;
        border-left: 1px solid #ddd;
    }
    #close-search:hover {
        background: #fff;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }
    </style>

2. Kode HTML
<div class='search-wrap-ensikology'>
        <form class='searchform-ensikology' action='/search' method='get'>
            <input class='searchbar-ensikology' id="searchbar-ensikology" placeholder='Type your text ...' type='search' autocomplete="off" />
            <input class='searchsubmit-ensikology' type='submit' value="&#xf002" />
        </form>
        <div class='search-out-ensikology'>
            <span class='search-label-ensikology'></span>
            <div class='search-result'></div>
            <div class="more-result-ensikology-wrap">
                <a class='more-result-ensikology' href='#'><i class='fa fa-folder-open-o'></i> View all results for "<b></b>"</a>
                <a href="javascript:void(0)" id="close-search" title="Close">&times;</a>
            </div>
        </div>
    </div>
3. Kode JS
<script type="text/javascript">
    // Blogger Live Search by Ensikology
    var homepage = "https://ensikology.blogspot.com"; // Ganti domain kamu
    var result = 5; // Number of result
    var max_result = 5; // For page navigation
    var no_thumbnail = "https://i.imgur.com/x5ykUQS.png"; // No thumbnail
    var target_blank = false;
    $(document).ready(function() {
        $("#close-search").click(function() {
            $(".search-out-ensikology").hide();
        });
        var textInput = document.getElementById("searchbar-ensikology");
        var timeout = null;
        // setelah pengguna selesai menulis kunci, mulai pencarian
        textInput.onkeyup = function(e) {
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                // hapus konten lama untuk menerapkan data baru setelah setiap perubahan konten input
                $('.search-item-ensikology').remove();
                $('.search-result').empty();
                // ambil kata kunci
                var labelname = $('.searchbar-ensikology').val();
                if (labelname.length >= 1) {
                    // perlihatkan hasil div
                    $('.search-out-ensikology').show();
                    // tampilkan deskripsi div saat mencari
                    $('.search-label-ensikology').show().html('Searching ...');
                    $.ajax({
                        type: 'GET',
                        url: homepage + '/feeds/posts/default',
                        data: {
                            'max-results': result,
                            'alt': 'json',
                            'q': labelname
                        },
                        contentType: 'application/json',
                        dataType: 'jsonp',
                        success: function(json) {
                            if (json.feed.entry) {
                                for (var i = 0; i < json.feed.entry.length; i++) {
                                    // Dapatkan tautan artikel
                                    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                                        if (json.feed.entry[i].link[j].rel == 'alternate') {
                                            var postUrl = json.feed.entry[i].link[j].href;
                                            break;
                                        }
                                    }
                                    // ambil thumbnail
                                    try {
                                        var imageurl = json.feed.entry[i].media$thumbnail.url;
                                    } catch (e) {
                                        var imageurl = no_thumbnail;
                                    }
                                    // dapatkan judulnya
                                    var postTitle = json.feed.entry[i].title.$t;
                                    // transmisi data
                                    if (target_blank) {
                                        var item = '<div class="search-item-ensikology"><a href="' + postUrl + '" target="_blank"><img src="' + imageurl + '"/></a><a href="' + postUrl + '" target="_blank">' + postTitle + '</a></div>';
                                    } else {
                                        var item = '<div class="search-item-ensikology"><a href="' + postUrl + '"><img src="' + imageurl + '"/></a><a href="' + postUrl + '">' + postTitle + '</a></div>';
                                    }
                                    // tambahkan data
                                    $('.search-result').append(item);
                                    item = "";
                                }
                                // Tambahkan tautan ke kata kunci jika pengguna ingin beralih ke halaman / pencarian tradisional
                                $('.more-result-ensikology').attr('href', homepage + '/search?q=' + labelname + '&max-results=' + max_result);
                                // sembunyikan deskripsi div dan tampilkan div "lihat lebih lanjut"
                                $('.search-label-ensikology').hide(function() {
                                    $('.more-result-ensikology b').text(labelname);
                                    $('.more-result-ensikology-wrap').show();
                                });
                            } else {
                                // tidak ada hasil
                                $('.search-label-ensikology').html('<i class="fa fa-meh-o"></i> No result ! Please try again');
                                $('.more-result-ensikology-wrap').hide();
                            }
                        }
                    });
                }
            }, 500);
        };
    });
    </script>

Untuk demo silahkan kunjungi Blogger Live Search

# blog

https://www.otodidak27.com/2019/06/membuat-pencarian-langsung-atau-live-search.html

0 Response to "Membuat Pencarian langsung atau Live Search"

Emoticon
Urutan

Post a Comment

Beri apresiasi terhadap thread ini Gan!

Anda dan 0 lainnya
Suka
Jadilah yg pertama menyukai

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright Ensikology All Rights Reserved
Powered by Blogger