كيف تكتب سلسلة بحث في html. ملحقات البحث عن المتصفحات. قم بإزالة علامة "مسح" في حقل البحث ، وحذف النص المكتوب مسبقًا
بالنسبة لكثير من الناس ، فإن فعالية البحث عن المعلومات على الإنترنت تكمن في الأرجل ذاتها التي تغذي الذئب. أين يمكنني أن أجد المعلومات الحالية والمحدثة؟ أين تشتري أرخص وتبيع أغلى؟ أين يمكنني أن أجد أدق التعليمات لأداء مهام معينة؟ أين تشاهد الأفلام على الإنترنت؟ للإجابة على هذه الأسئلة وأسئلة مماثلة للمستخدمين بشكل صحيح قدر الإمكان ، تعمل محركات البحث من عام إلى آخر على تحسين الآليات المعقدة بالفعل لعرض المواقع في نتائج البحث لاستفسارات مستخدم محددة. الهدف من محركات البحث هو نقل الأشخاص إلى موقع بأعلى جودة ممكنة للحصول على إجابات للأسئلة المطروحة.
بالإضافة إلى محركات البحث ، فإن محركات البحث نفسها مزودة بفلاتر بحث بحيث يمكن لأي مستخدم تضييق نطاق البحث عن المعلومات أو تضييق نطاق طلبه.
ضع في اعتبارك أدناه بعض امتدادات البحث التي يمكن أن تكمل المتصفحات الشائعة ، ونتيجة لذلك ، تزيد من كفاءة البحث عن المعلومات على الإنترنت.
ملحقات البحث لجوجل كروم
ابحث في الموقع الحالي
ليس كل موقع مزودًا بمحرك بحث داخلي ، وعلى هذه الموارد ، عليك تشغيل من قسم إلى قسم لفترة طويلة بحثًا عن معلومات محددة. يعد ملحق المتصفح المدمج للبحث داخل الموقع أداة عالمية ستكون دائمًا في متناول اليد ، بغض النظر عن الموقع الذي تزوره. كل ما يجب القيام به للعثور على المعلومات التي تحتاجها داخل الموقع هو إدخال كلمة رئيسية في حقل البحث الصغير الذي يظهر عند النقر فوق زر الامتداد في شريط المتصفح.
سيتم فتح نتائج البحث لمحرك البحث في علامة تبويب متصفح جديدة ، وسيختارون صفحات موقع معين حيث توجد الكلمة الأساسية.
البحث في الموقع الحالي يتم تنفيذه باستخدام محرك بحث Google مثبت مسبقًا ، ولكن في معلمات الامتداد ، يمكنك تثبيت محرك بحث آخر - Yandex أو Yahoo أو Bing. للقيام بذلك ، اتصل بقائمة السياق على زر التمديد وحدد أمر "Parameters".
ستفتح خيارات الامتداد في علامة تبويب متصفح جديدة ، حيث يمكننا تحديد محرك بحث مختلف. وستقوم بالفعل بالبحث داخل الموقع.
بحث جوجل البديل
يوفر محرك بحث Yandex في البداية القدرة على البحث عن المعلومات في محركي بحث آخرين - Google و Bing - بنقرة واحدة ، على الرغم من أن الروابط للانتقال إلى محركات البحث هذه جنبًا إلى جنب مع الاستعلام الرئيسي الذي تم إدخاله يتم تجميعها في الجزء السفلي من صفحة نتائج البحث.
لكن Google أكثر أنانية في هذا الصدد - في نتائج بحثها لم يرد ذكر لمحركات البحث المنافسة. يمكن تصحيح هذا الموقف عن طريق تنفيذ امتداد "بحث Google البديل" في Google Chrome.
من الأسهل تثبيت امتداد خاص لهذا الغرض TMS (Torrents MultiSearch) بدلاً من إدخال ملحق بالكلمة الرئيسية "torrent" للحصول على نتائج البحث عن متتبعات التورنت.
زر الامتداد مضمن في شريط أدوات المتصفح ، وعند النقر عليه ، سيتم فتح حقل بحث صغير لإدخال استعلامك.
تظهر نتائج البحث في علامة تبويب منفصلة ، وسيكون هذا المحتوى موجودًا فقط على متتبعات التورنت في Runet ، وليس على مواقع vareznik أو بوابات البرامج والوسائط أو المواقع الرسمية.
في نتائج البحث عن متتبعات التورنت ، يمكن تصفية المحتوى الموجود حسب حجم الملف أو تاريخ تحميله. يمكن تحديد كلمات رئيسية إضافية لتضييق نطاق البحث.
يمكن أيضًا عرض نتائج البحث بشكل منفصل لمتتبعات تورنت محددة وبشكل منفصل لأنواع المحتوى مثل الأفلام والموسيقى والبرامج.
بالإضافة إلى ذلك ، تم تضمين امتداد TMS في قائمة سياق المتصفح بحيث يمكنك إرسال أي كلمة أو عبارة مميزة على الصفحات على الإنترنت للبحث في متتبعات التورنت دون ضجة لا داعي لها مع النسخ واللصق.
البحث السياقي
نفذ Google Chrome وظيفة بحث سياقية باستخدام محرك بحث واحد مثبت في المتصفح الافتراضي. يهدف امتداد "بحث المحتوى" إلى زيادة عدد محركات البحث التي يمكن استخدامها للبحث عن أي كلمة محددة في صفحات الموقع.
الامتداد لديه القدرة في البداية على البحث في أشهر أدوات تعقب التورنت RuTracker و Wikipedia وبوابة الوسائط Kinopoisk.Ru.
تتم إضافة محركات البحث الأخرى ، بحيث يكون من الممكن من خلالها البحث عن المعلومات مباشرة من قائمة سياق المتصفح ، في معلمات الامتداد. لنفتح قائمة Google Chrome ، حدد "الإعدادات" وانتقل إلى قسم الإضافات المثبتة في المتصفح.
في قائمة الامتدادات ، حدد ما نحتاج إليه - "بحث السياق". انقر على رابط "خيارات".
امتدادات البحث عن Opera
بحث داخل الموقع
يوجد زر الامتداد في شريط أدوات المتصفح ، وبالنقر عليه يمكنك استدعاء حقل البحث لإدخال استعلام رئيسي ، وكذلك تغيير محرك البحث.
يمكن استكمال Yandex و Google المثبتين مسبقًا في إعدادات الامتداد بمحركات بحث أخرى. اتصل بقائمة السياق على زر التمديد وحدد أمر "الإعدادات".
بنفس الطريقة كما في حالة امتداد "بحث المحتوى" لـ Google Chrome ، لإضافة محرك بحث جديد ، يجب عليك إدخال سلسلة عنوان URL الخاص به.
التورنت MultiSearch
البحث عن صور مماثلة
يضيف بحث الصور المماثل أمرًا إضافيًا للبحث عن صور مماثلة باستخدام العديد من محركات البحث إلى قائمة سياق متصفح Opera.
أو سيتم تقديم قائمة بالمنشورات مع صور مماثلة.
امتدادات البحث عن Mozilla Firefox
بحث الموقع
كما في الحالتين السابقتين ، يوجد ملحق خاص للبحث داخل أي موقع على الإنترنت لمتصفح Mozilla Firefox.
فقط في حالة Fire Fox ، يتم تضمين البحث في الموقع في حقل البحث الحالي للمتصفح ، مضيفًا أيقونته على شكل عدسة مكبرة حمراء أمام رمز البحث العادي.
تغيير محرك البحث الافتراضي للبحث العادي في Mozilla Firefox يستلزم تغيير محرك البحث والبحث داخل المواقع.
تم دمج ملحق Site Search في قائمة سياق Mozilla Firefox ، ومن خلال تحديد أي كلمة تأتي في متناول اليد ، يمكنك في نتائج البحث الفردية رؤية جميع صفحات الموقع التي توجد بها هذه الكلمة.
البحث من byffox
أي منتجات برمجية تحمل مثل هذه الأسماء "لم تنضج بعد" ، كقاعدة عامة ، تزعج العديد من المستخدمين بحقيقة أنهم لا يرون حتى تلميحًا للغرض المقصود من الأدوات المقترحة.
وما يقدمه بالضبط "Softina from Vasya" أو "Repack play from Petya" ، عليك أن تعرفه فقط بعد معرفة مفصلة بالوصف. ومع ذلك ، فإن وراء هذا الاسم التافه مثل "Search from byffox" وظيفة مفيدة ومعقولة. يسمح لك هذا الامتداد بتجديد قائمة سياق المتصفح بأمر بحث إضافي عن الكلمة المحددة باستخدام محركات بحث متنوعة.
هذا المنشور هو استمرار للمقال السابق (الترجمة) "ابحث عن مدونة باستخدام Google AJAX Search API و jQuery".
بعد كتابته ، فكرت في المكان الأكثر نجاحًا لوضع مثل هذا النموذج وسجادة من النتائج ، باستثناء صفحة منفصلة. لم تكن الفكرة طويلة: فمن المنطقي أن تجرب البحث بالنتائج في نافذة منبثقة.
أول تجريبي:
البحث في المدونات ↓
كأساس للبحث المنبثق ، اخترت مكونًا إضافيًا مشروط jQuery يسمى كشف ... إنه خفيف الوزن ، بدون عناصر غير ضرورية وسهل التوصيل.تثبيت ريفيل.
تمت كتابة روابط البرنامج النصي والأنماط في قسم القالب:
لا تنس أن هناك صورة png في أرشيف الملحق ، والتي تحتاج إلى وضعها في ألبوم البيكا الخاص بك وكتابة المسار إليها تكشف .css.
الخطوة التالية هي تهيئة المكون الإضافي " ضبط" النصي (ضع في نفس المكان):
ثم نحدد محتوى منبثق (نضع هذا في نص المنشور):
البحث في المدونات ↓
هنا نقوم بإدخال جميع أكواد البحث من مقال "ابحث عن مدونة باستخدام Google AJAX Search API and jQuery".
حسب تعليقي داخل هذا الكود ، انسخ والصق "بحث google" بالكامل هناكالذي نتحدث عنه الآن. في ورقة أنماط css ، سيتعين عليك زيادة مساحة المربع الأبيض.
والخطوة الأخيرة هي نفسها ارتباط مشروط، والتي يمكن أن تكون نصية ورسومية. كود الرابط على شكل صورة (أيضًا في نص المنشور):
يملك كشف، ملحق مشروط ، هناك نوعان من الرسوم المتحركة: تتلاشى وتتلاشى، سرعة قابلة للتعديل للتأثير: سرعة الحركة: 300، وإمكانية إغلاق النافذة بالكامل بالضغط على الخلفية المظلمة: closeonbackgroundclick: صحيح.
تتم كتابة هذه الإعدادات في البرنامج النصي "التكوين" (انظر أعلاه):
كشف $ ("# myModal"). "close-unlock-modal" // فئة الزر أو العنصر الذي سيغلق نموذجًا مفتوحًا)) ؛
أو يمكن توصيل هذه الخيارات عبر حلقة الوصل إلى نافذة مشروطة (انظر أعلاه)
يجب أن يكون مفهوما أن مثل هذا المخطط مع البحث في نافذة منفصلة - تجربة نقية وتتطلب تخصيصًا أكثر دقة.
في هذا البرنامج التعليمي ، سننشئ نموذج بحث منسدلاً يتناسب تمامًا مع تصميم واجهة الهاتف المحمول. سيتم استخدام CSS فقط لتنفيذ العنصر - بدون JavaScript أو ترميز إضافي. طريقة بسيطة وفعالة لتنفيذ نموذج بحث مضغوط.
موعد
على الأجهزة المحمولة ، يتم حساب كل بكسل. لتقليل مقدار المساحة المطلوبة لعرض النموذج ، سيتم عرضه مبدئيًا في شكل مضغوط ويتم توسيعه عند تلقي تركيز الإدخال (: التركيز). يوفر هذا الأسلوب مساحة لعناصر ومحتوى الواجهة الأخرى.
ترميز HTML
يستخدم النموذج HTML5. الكود بسيط للغاية:
إعادة تعيين العرض الافتراضي لنموذج البحث في متصفحات Webkit
بشكل افتراضي ، في متصفحات Webkit ، سيبدو نموذج البحث كما يلي:
لجعل نموذج البحث يبدو كحقل إدخال نص عادي ، تحتاج إلى إضافة الأنماط التالية:
الإدخال (- مظهر مجموعة الويب: textfield ؛ -webkit-box-sizing: content-box ؛ عائلة الخطوط: وراثة ؛ حجم الخط: 100٪ ؛) الإدخال :: - webkit-search-decoration ، المدخلات :: - webkit- زر إلغاء البحث (عرض: لا شيء ؛)
نحن نشكل نموذج البحث الخاص بنا
سيكون عرض حقل الإدخال 55 بكسل ويتم توسيعه إلى 130 بكسل في حالة التركيز. يتم استخدام خاصية الانتقال للرسوم المتحركة ويتم استخدام ظل الصندوق لتأثير التوهج.
الإدخال (الخلفية: #eded url (img / search-icon.png) no-Repeat 9px center؛ border: solid 1px #ccc؛ padding: 9px 10px 9px 32px؛ width: 55px؛ / * العرض الافتراضي * / -webkit- نصف قطر الحدود: 10em ؛ -moz-border-radius: 10em ؛ نصف قطر الحدود: 10em ؛ -webkit-transfer: all .5s ؛ -moz-transfer: all .5s ؛ الانتقال: all .5s ؛) الإدخال: التركيز ( العرض: 130 بكسل ؛ / * العرض مع التركيز * / لون الخلفية: #fff ؛ لون الحدود: # 6dcff6 ؛ -webkit-box-shadow: 0 0 5px rgba (109،207،246، .5)؛ -moz-box- الظل: 0 0 5px rgba (109،207،246، .5) ؛ ظل الصندوق: 0 0 5px rgba (109،207،246، .5) ؛ / * تأثير التوهج * /)
مثال ب
في المثال ب ، يتم تصغير نموذج البحث بشكل كبير - يتم عرض الرمز فقط دون ملء النص. لاحظ أن خصائص المساحة المتروكة والعرض لمربع البحث قد تغيرت لتشكل زرًا دائريًا. لجعل النص غير مرئي ، استخدم خاصية color: transparent.
# demo-b input (width: 15px؛ padding-left: 10px؛ color: transparent؛ cursor: pointer؛) # demo-b input: hover (background-color: #fff؛) # demo-b input: focus (width : 130 بكسل ؛ المساحة اليسرى: 32 بكسل ؛ اللون: # 000 ؛ لون الخلفية: #fff ؛ المؤشر: تلقائي ؛)
التوافق المتصفح
تعمل الطريقة الموضحة في جميع المتصفحات الرئيسية: Chrome و Firefox و Safari و IE8 +. في IE7 والمتصفحات الأقدم ، لا تعمل الوظيفة بسبب نقص الدعم لـ: فئة pseudo-class ونوع حقل البحث.
25 أكتوبر 2019 تم تحديث الإدخال
انزلاق استمارة البحث على الموقع
اكتسب النمط المسطح شعبية كبيرة في تصميم مواقع الويب. وفي هذا الدرس سنلقي نظرة على عنصر آخر من عناصر الموقع تم إنشاؤه بهذا الأسلوب. هذا العنصر هو نموذج بحث. ولكن ليس بسيطًا ، ولكنه نموذج بحث يظهر عند النقر عليه و "ينهار" إذا لم يتم استخدامه. بالنسبة لأيقونة البحث ، فهي مأخوذة من ملف SVG ويمكن تغيير حجمها عبر درجات دقة شاشة مختلفة (سواء على الأجهزة المحمولة أو على الشاشات الكبيرة).
يمكن مشاهدة مثال هنا:
تحميل
نموذج بحث يسحب للخارج
كيف تستعمل؟
لغة البرمجة
أولاً ، دعنا نحدد الترميز الذي سيكون على صفحة HTML:
| 1 2 3 4 5 6 7 | <div id \u003d "sb-search" class \u003d "sb-search"\u003e <شكل\u003e <فئة الإدخال \u003d "sb-search-input" placeholder \u003d "ما الذي تبحث عنه؟" اكتب \u003d "text" value \u003d "" name \u003d "search" id \u003d "search"\u003e <فئة الإدخال \u003d "sb-search-submit" type \u003d "submit" value \u003d ""\u003e <span class \u003d "sb-icon-search"\u003e </ شكل\u003e </ div\u003e |
لا يوجد شيء غير عادي في نموذج البحث: حقل نصي للإدخال ، زر بحث وعنصر للرمز.
CSS
الآن دعنا نضيف بعض الأنماط لجعل نموذج البحث يبدو جميلاً على الصفحة.
نظرًا لأنه سيظهر عند النقر عليه ، فهو مخفي في البداية. يتم ذلك باستخدام الخاصية تجاوزومعناه مخفي، ونتيجة لذلك يتم إخفاء كل شيء خارج الرمز (نتيجة لذلك ، نرى الرمز فقط ، وليس حقل النص):
| .sb-search (position: النسبي ؛ margin-top: 10px ؛ العرض: 0٪ ؛ min-width: 60px ؛ height: 60px ؛ float: right ؛ overflow: hidden ؛ -webkit-transfer: width 0.3s ؛ -moz- الانتقال: العرض 0.3 ثانية ؛ الانتقال: العرض 0.3 ثانية ؛ -مجموعة الويب-الخلفية-الرؤية: مخفي ؛) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .sb-search-input (الموقف: مطلق ؛ أعلى: 0 ؛ يمين: 0 ؛ حد: لا شيء ؛ مخطط تفصيلي: لا شيء ؛ الخلفية: #fff ؛ العرض: 100٪ ؛ الارتفاع: 60 بكسل ؛ الهامش: 0 ؛ مؤشر z: 10 ؛ padding: 20px 65px 20px 20px؛ font-family: ورث؛ حجم الخط: 20px؛ color: # 2c3e50؛) \u200b\u200bإدخال [type \u003d "search"] .sb-search-input (-webkit-المظهر: none ؛ -webkit نصف قطر الحدود: 0 بكسل ؛) |
تحديد لون النص الموجود في خلفية الطلب (النص الذي ندخله أثناء البحث):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .sb-search-input :: -webkit-input-placeholder (color: # efb480؛) .sb-search-input: -moz-placeholder (color: # efb480؛) .sb-search-input :: -moz- عنصر نائب (اللون: # efb480 ؛) .sb-search-input: -ms-input-placeholder (color: # efb480؛) |
يكون زر البحث دائمًا فوق باقي الكتل والعناصر الموجودة في الصفحة ، لذلك قمنا بتعيينه على قيمة رائعة مؤشر z:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .sb-icon-search (color: #fff؛ background: # e67e22؛ z-index: 90؛ font-size: 22px؛ font-family: "icomoon"؛ talk: none؛ font-style: normal؛ font-weight : normal؛ font-variant: normal؛ text-transform: none؛ -webkit-font-smoothing: antialiased؛) .sb-icon-search: before (content: " \\ e000 "; } |
أيضًا ، لا تنس تضمين رموز خاصة (SVG). لإدراج رمز في زر البحث:
| 1 2 3 4 5 6 7 8 9 10 | @ font-face (عائلة الخطوط: "icomoon"؛ src: url ( "../fonts/icomoon/icomoon.eot") ؛ src: url ( "../fonts/icomoon/icomoon.eot؟#iefix") تنسيق ("embedded-opentype") ، url ( "../fonts/icomoon/icomoon.woff") تنسيق ("woff") ، url ( "../fonts/icomoon/icomoon.ttf") تنسيق (نص "تروتايب"\u003e<script src \u003d "js / uisearch.js"\u003e <نصي\u003e UISearch جديد (document.getElementById ("sb-search")) ؛</ النصي\u003e |
انتاج |
نموذج بحث رائع يشغل مساحة صغيرة جدًا على الموقع ويظهر بشكل جميل عند النقر فوق رمز البحث.
اسم مفتاح المعلمة. بالنسبة إلى حقل البحث ، غالبًا ما يتم استخدام "q" أو "text". قيمة مفتاح المعلمة. في أغلب الأحيان لا يطلب ذلك. يمكن للمستخدم تغييره إلى نصه الخاص إذا لم يتم تحديد سمات للقراءة فقط والمعاقين. تعديل المستخدم المحظور الوصول المحظور وتعديل المستخدم ونقل البيانات لحقل المعلمة الحالي لا يمكن أن يكون قالب إدخال فارغًا كما هو الحال في التعبيرات العادية JS ، والتي يجب اتباعها لإرسال النموذج الحد الأدنى لعدد الأحرف المطلوبة لإرسال النموذج الأقصى لعدد الأحرف التي يمكن للمستخدم كتابة طول الحقل في رمز تلميح - عنصر نائب تلميح عند الإكمال التلقائي للتمرير. تعرض المتصفحات الحديثة عمليات البحث التي تم إدخالها مسبقًا في المجال الحالي. يمكنك إيقاف تشغيله أو جعله أكثر تحديدًا. قائمة الاستعلامات الموصى بها التدقيق الإملائي والنحوي التركيز الميداني (أي الفترة بين النقر على عنصر والنقر خارج العنصر) المتلقاة عند تحميل مستند
قم بإزالة علامة "مسح" في حقل البحث ، وحذف النص المكتوب مسبقًا
كيف يعمل نموذج البحث على الموقع
أبسط كود HTML
إذا قمت بكتابة حقل "السؤال" والنقر على الزر "بحث" ، فسيتغير عنوان الصفحة من "http: //site/2011/06/forma-poiska-po-saitu..html ؟ text \u003d سؤال »كما يحدث عند النقر فوق ارتباط. عند تحميل الصفحة ، يتحقق النص البرمجي من وجود المعلمات المحددة في عنوان URL ، وإذا تم العثور عليه ، يقوم بإنشاء وعرض نتائج البحث على الموقع.
ولكن من أجل زيادة سرعة تحميل المستند ، يتم وضع النص البرمجي الذي يعالج الطلب ، كقاعدة عامة ، على صفحة واحدة فقط من الموقع ، سيتم الانتقال إليها ، إذا كان عنوانه مكتوبًا في سمة الإجراء: " http: // موقع / بحث /؟ text \u003d question ".
لكي يعمل البرنامج النصي ، قد تكون هناك حاجة إلى معلمات إضافية محددة في ... لا يتم عرض هذا الحقل.؟ searchid \u003d 808327& text \u003d سؤال ".
افتح نتيجة النموذج في علامة تبويب جديدة باستخدام السمة الهدف
من أين تحصل على البرنامج النصي للبحث في الموقع
يمكنك استخدام
- التي تقدمها خدمات خاصة من Yandex و Google ،
- مضمن في نظام إدارة المحتوى المستخدم (إن وجد) ، على سبيل المثال ، في Blogger على "https: // site.ru/ search؟ q \u003d question "، حيث يتم استبدال" site.ru "بعنوان مدونتك ،
- تم تطويرها بشكل مستقل ، على سبيل المثال ، في PHP.
الخيار الأسهل هو إعادة توجيه طلب Google:
نص على الزر: "بحث" ، "بحث" ، "بحث"
من الكلمات المحفزة "بحث" له شكل مثالي ويعني أن نتيجة البحث ستكون بالضرورة إيجابية.
