محرك بحث متطور بتقنية ajax

محرك بحث متطور بتقنية ajax

يوجد الآن مشاهدة التعليقات : 18

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات


من الأشياء المهمة في أي موقع أو أي مدونة هو محرك بحث ، ليساعد الزوار الى الوصول لما يبحثون عنه بأسرع وقت و بدون بذل جهد في البحث عن مايريدون الوصول اليه ، وفي هذه التدوينة الرائعة من قسم إضافات بلوجر بمحرك بحث متطور بتقنية ajax، وهذ يعني أنه يمكن البحث بدون الذهاب إلى الصفحة الخاصة بالمطلوب ولكي تتوضح لكم طريقة عمله سأترككم لتجربة المحرك كل ما عليكم فعله هو استخدام صندوق البحث بالشريط الجانبي الخاصة بالمدونة
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <b:skin/><[[
3. ضع الكود التالي فوقه
#search-result * { margin:0 0 0 0; padding:0 0 0 0; }
li { display:list-item; }
#form-search { width:300px; right:100px;padding:5px; }
#ajax-search-form { position:relative; font:normal normal 13px Droidkufi-regular;direction: rtl; }
#ajax-search-form input { border:1px solid #e3e3e3; background-color:white; font:normal normal 12px/100% Droidkufi-regular; color:black; margin:0 0;line-height:22px; padding:0 5px; width:140px; }
#ajax-search-form input[type="submit"] { width:auto; background-color:#49afcd; border:none; color:white; font-weight:bold; cursor:pointer; font-size:12px; }
#search-result { background-color:#444444; padding:5px 2px; margin:2px 0; width:300px; overflow:auto; max-height:710px; position:absolute; right:6px; top:28px; z-index:99; color:white; border-radius:0 0 3px 3px; box-shadow:0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3); display:none; }
#search-result .close { display:block; position:absolute; top:5px; font-size:20px; left:10px; line-height:normal; color:white; }
#search-result ul { margin:0; overflow:hidden; max-height:405px;list-style:none; }
#search-result li { height:68px; overflow:hidden; padding:0 5px; border-top: 1px solid #565555; border-bottom: 1px solid #2D2C2C; position:relative; }
#ajax-search-form a { color:#741F27; text-decoration:none; }
#search-result h4 { display:block; margin:0 0 10px 5px; color:white;    padding-right: 10px; }
#search-result p { font-size:10px; color:white;    font-family: tahoma; }
#search-result span { width:50px; height:50px; display:block; float:right; padding:2px; margin-left:5px; margin-top:5px; background-color:whitesmoke; }
#search-result img { width:100%; height:100%; display:block; }
#search-result h5 { color:#fff; overflow:hidden; font-size:100%; margin-top:2px; height:16px; }
#search-result h5:hover { color:#49AFCD; text-decoration:underline; }
#search-result mark { color:white; background:#085C0B; padding:0 3px; }
#search-result ul:hover { overflow:auto; }
4. ابحث عن : <body/> ثم ضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
    def: "easeOutQuad",
    swing: function (x, t, b, c, d) {
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d)
    },
    easeInQuad: function (x, t, b, c, d) {
        return c * (t /= d) * t + b
    },
    easeOutQuad: function (x, t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b
    },
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t + b
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b
    },
    easeInCubic: function (x, t, b, c, d) {
        return c * (t /= d) * t * t + b
    },
    easeOutCubic: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b
    },
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t + 2) + b
    },
    easeInQuart: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t + b
    },
    easeOutQuart: function (x, t, b, c, d) {
        return -c * ((t = t / d - 1) * t * t * t - 1) + b
    },
    easeInOutQuart: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t + b
        }
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b
    },
    easeInQuint: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b
    },
    easeOutQuint: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b
    },
    easeInOutQuint: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
    },
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
    },
    easeOutSine: function (x, t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b
    },
    easeInOutSine: function (x, t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
    },
    easeInExpo: function (x, t, b, c, d) {
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
    },
    easeOutExpo: function (x, t, b, c, d) {
        return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
    },
    easeInOutExpo: function (x, t, b, c, d) {
        if (t == 0) {
            return b
        }
        if (t == d) {
            return b + c
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * Math.pow(2, 10 * (t - 1)) + b
        }
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
    },
    easeInCirc: function (x, t, b, c, d) {
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
    },
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
    },
    easeInOutCirc: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
        }
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
    },
    easeInElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
    },
    easeOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d / 2) == 2) {
            return b + c
        }
        if (!p) {
            p = d * (0.3 * 1.5)
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        if (t < 1) {
            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
        }
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
    },
    easeInBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * (t /= d) * t * ((s + 1) * t - s) + b
    },
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
    },
    easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
        }
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
    },
    easeInBounce: function (x, t, b, c, d) {
        return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b
    },
    easeOutBounce: function (x, t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b
        } else {
            if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
            } else {
                if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
                }
            }
        }
    },
    easeInOutBounce: function (x, t, b, c, d) {
        if (t < d / 2) {
            return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * 0.5 + b
        }
        return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
    }
});
/* Search*/
var searchFormConfig = {
    summaryPost: true,
    resultThumbnail: true,
    fallbackThumb: "http://1.bp.blogspot.com/-41xX9MKBr-w/U1Tt0T8gNRI/AAAAAAAABZw/SocPS0qeq1k/s50-c/Noim.png",
    thumbSize: 50,
    summaryLength: 100
};
(function (c) {
    var a = c("#ajax-search-form"),
        d = a.find(":text");
    config = searchFormConfig;
    a.append('<div id="search-result"></div>');
    var b = c("#search-result");
    a.on("submit", function () {
        var e = d.val();
        b.slideDown(500, "easeOutBounce").html("جاري البحث...");
        c.ajax({
            url: "http://www.ar1web.com/feeds/posts/summary?alt=json-in-script&q=" + e + "&max-results=9999",
            type: "get",
            dataType: "jsonp",
            success: function (q) {
                var p = q.feed.entry,
                    m, l, o, n, g = "";
                if (p !== undefined) {
                    g = "<h4>نتائج البحث عن الكلمة &quot;" + e + "&quot;</h4>";
                    g += '<a class="close" href="/">&times;</a><ul>';
                    for (var k = 0; k < p.length; k++) {
                        var f = new RegExp(e, "ig"),
                            o = p[k].title.$t.replace(f, "<mark>" + e + "</mark>");
                        for (var h = 0; h < p[k].link.length; h++) {
                            if (p[k].link[h].rel == "alternate") {
                                n = p[k].link[h].href
                            }
                        }
                        if (config.summaryPost === true) {
                            if ("content" in p[k]) {
                                m = p[k].content.$t
                            } else {
                                if ("summary" in p[k]) {
                                    m = p[k].summary.$t
                                } else {
                                    m = ""
                                }
                            }
                        }
                        if (config.resultThumbnail === true) {
                            if ("media$thumbnail" in p[k]) {
                                l = p[k].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + config.thumbSize + "-c")
                            } else {
                                l = config.fallbackThumb
                            }
                        }
                        m = m.replace(/<\S[^>]*>/g, "");
                        if (m.length > config.summaryLength) {
                            m = m.substring(0, config.summaryLength) + "..."
                        }
                        m = m.replace(f, "<mark>" + e + "</mark>");
                        g += '<li><a href="' + n + '" target="_blank"><span><img src="' + l + '" alt="" /></span><h5>' + o + "</h5></a><p>" + m + "</p></li>"
                    }
                    g += "</ul>";
                    b.html(g)
                } else {
                    b.html('<a class="close" href="/">&times;</a><strong>لا توجد نتائج!</strong>')
                }
            },
            error: function () {
                b.html('<a class="close" href="/">&times;</a><strong>خطأ في التحميل.</strong>')
            }
        });
        return false
    });
    a.on("click", ".close", function () {
        b.slideUp(500, "easeInExpo");
        return false
    })
})(jQuery);
//]]>
</script>
* غير www.ar1web.com برابط موقعك
5. ضع الكود التالي في المكان المناسب إما بدل المحرك القديم أو ضعه في أداة Html/Javascript
<div id='form-search'>
    <form action='/search' id='ajax-search-form'>
        <input name='q' type='text'/>
        <input type='submit' value='بحث سريع'/>
    </form>
</div>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 18 تعليقًا:

  1. ممكن تبادل اعلاني لمدونتك
    المدونة : http://www.hmode.besaba.com/
    اريده تبادل صوري ان لن توافق اجعله تبادل نصي عند الموافقة اعطيك رابط البنر

    ردحذف
    الردود
    1. توجه إلى الصفحة الخاصة بالتبادل الإعلاني وراجع الشروط :

      http://www.ar1web.com/p/blog-page_13.html

      حذف
  2. جميل أشكرك يا غالي ، كيف يمكنني التحكم بعرض شريط البحث http://im46.gulfup.com/UJLm2D.png كما تشاهد في الصورة هو قصير نسبياً مع الإضافات الأخرى أريد أن أقوم بزيادة عرضه قليلاً تقريباً 15 Px :)

    ردحذف
    الردود
    1. ابحث عن : #ajax-search-form .searchbox
      في السطور التي بعدها ستجد : width والرقم أمامها غيره بحسب رغبتك
      موفق . :)

      حذف
  3. اخي لا يوجد لدي محرك بحث قديم فكيف اقوم بذلك
    وهنالك ملاحظة:اقسام المدونة والقائمة العلوية اضيفهم انا من التخطيط وليس من القالب نفسه
    رابط المدونة
    http://th3geekweb3.blogspot.com/

    ردحذف
    الردود
    1. أعني بكلامي أنه يجب حذف محرك البحث القديم / كل شيئ لديك تمام
      بالنسبة لـلأقسام فتضاف لديك من التخطيط

      حذف
  4. شكر لك عليهذه الاضافه الجميلة اخي

    ولاكن اخي انا لايوجد لدي محرك بحث قديم ولا اجد هذها الكود div id='search'>


    ولا اعرف اين ساضع هذا

    <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>

    ردحذف
    الردود
    1. ضعها في القائمة التي لديك ضع الكود بأخر القائمة

      حذف
  5. Ahmed Elemam2/07/2015

    اخى كيف اقوم بوضعها جمب التسميات

    ردحذف
  6. لم يتم تشغيل المحرك بشكل الصور

    ردحذف
  7. لماذا لم ينجح
    لا يظهر الصور

    ردحذف
    الردود
    1. سيتم وضع شرح آخر لكود جديد في الأيام القادمة

      حذف
    2. بسبب أن قالبك لا يستعمل الطريقة العادية للصور في البلوجر أي يجب أن تكون مرفوعة على استظافة البلوجر لتظهر

      حذف
  8. محرك البحث يعمل فعلا لكن ليس ب اجاكس
    اخي لان هناك خطا في كود جافا سكريبت اعلاه ....
    لان فيه تعليقات لسطر واحد .. والكود مضغوط يعني السلاش / الخاص بالتعليقات لسطر واحد اختلط مع جمع الاسطر الاخرى التي لا يجب ان تكون تعليق
    ..
    راجع الكود وشكرا على المجهودات :)

    ردحذف
    الردود
    1. شكرا لك على الملاحظة اخي فعلا الكود كان متداخل، على أي حال لقد تم تحديث كامل الإضافة...

      حذف
  9. شكرا لكن لم أعرف كيف أركبه في موقعي و ليس في مدونتي لأنني أريده في الموقع :)

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم