اضافة محرك بحث بلغة ajax لمدونات بلوجر (بحث دون تحويل الصفحة )

من الأشياء المهمة في أي موقع أو أي مدونة هو محرك بحث , ليساعد الزوار الى الوصول لما يبحثون عنه بأسرع وقت و بدون بذل جهد في البحث عن مايريدون الوصول اليه , لذالك في  هذه الحلقة سأقدم لك محرك بحث احترافي لمدونات بلوجر , بلغة ال ajax 

هذا المحرك فيه مميزات كثيرة جعلتنا نقدمه لجميع , متتبعي موقع فكرة مطور , مايميزه هو أنه أولا شكله جميل و احترافي و الأهم فيه هو طريقة ظهور نتائج البحث , فنتائج البحث تظهر بطريقة أخرى جديدة , أترككم تتفقدوها في هذه الحلقة التي أشرح فيها هذا المحرك  بالتفصيل.

كود الـ Css :

/*-------ajax-form---------*/
.search {
overflow: hidden;
position: absolute;
left: 13%;
float: none;
z-index: 9999;
width:300px;
}
#ajax-search-form {
position:relative;
font:normal normal 13px/normal Arial,Sans-Serif;
float:right;
margin-top: 2px;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form .searchbox {
border: none;
padding: 10px;
font: normal 12px tahoma;
border-radius: 0 3px 3px 0;
transition: 0.4s;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfAioE7W7yvdSGDRvOyWzn3uzYGo9HC-zGazBCW87UaMcKqBXMxSeZUgMhNBddftI-7fxGsWd0w1Jum-ySdt3iq6N1Y2m3rRI6wYq3ZZMGOqgIpE8V0zbt6XLXM09nlDmEissTtY-A5Ye/s1600/search.png) no-repeat 4%;
width: 216px;
margin: 0;
}
#ajax-search-form input::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
#ajax-search-form .searchbtn {
width: auto;
background-color: #04BCBC;
border: none;
font: normal 12px tahoma;
cursor: pointer;
padding: 10px 20px;
margin: 0 -4px 0 0;
border-radius: 3px 0 0 3px;
color: #FFF;
}
#ajax-search-form .searchbtn:hover{background-color:#444}
#search-result {
border-top: none;
background-color: #FFF;
padding: 10px;
margin: 10px 0;
width: 278px;
height: auto;
position: relative;
top: 0;
left: 0;
max-height:310px;
overflow:auto;
z-index: 99;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
display: none;
}
#search-result li {
padding: 10px;
border: 1px dotted #EEE;
color: #AAA;
font-size: 0px;
line-height: 1em;
margin: 0 0 5px 5px;
overflow: hidden;
}
#search-result img {
float:right;
margin: 0 0 0 8px;
border: 3px solid #EEE;
}
#ajax-search-form a {
color: #888;
line-height: 1.9em !important;
font: normal 12px tahoma;
text-decoration: none;
padding: 0;
}
#search-result ol,
#search-result h4 {
margin:0;
padding:0;
}
#search-result h4, #search-result strong {
display: block;
margin: 0 0 10px 0;
font: normal 12px ges,tahoma;
color: #BF4247;
}
#search-result ol {margin:0;
text-align:right;
}
#search-result ol a:hover {
color: #BF4247;
text-decoration: underline;
background: none;
}
#search-result .close {
display: block;
position: absolute;
top: 0;
left: 10px;
line-height: normal;
color: #f00;
font-size: 18px;
}
#search-result strong {color:#B75252}
#blog-pager {
margin: 1em 0;
text-align: center;
overflow: hidden;
clear: both;
}

كود HTML

<div id='search'>

<form action='/search' id='ajax-search-form'>

<input class='searchbox' name='q' placeholder='ابحث عن درس او دورة...' type='text'/>

<input class='searchbtn' type='submit' value='بحث'/>

</form>

</div>

كود Javascript

<script type='text/javascript'>
                      //<![CDATA[
(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
 
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
 
    // When the keyword is submitted...
    $form.on("submit", function() {
        // Get the input value
        var keyword = $input.val();
        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('جاري عملية البحث...');
        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://2bftphttp.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',
            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, summary, thumbnail, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4> البحث عن مقالات حسب التصنيف  &#8220;' + keyword + '&#8221;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s40-c") + '" width="40" height="40">' : "";
                        summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
                        summary = summary.length > 100 ? summary.substring(0, 100) + '&hellip;' : summary;
                        skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>المعذرة يبدو ان ما تبحث عنه غير موجود بالموقع :(</strong>');
                }
            },
            error: function() {
                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>خطأ في عملية البحث المرجوا المحاولة لاحقا.</strong>');
            }
        });
        return false;
    });
    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);
                      //]]>
</script>

مكتبة الجيكوري JQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

الى هنا ينتهي الدرس والسلام عليكم ورحمة الله تعالى وبركاته