swiftype search jquery تنزيل - swiftype search jquery تنزيل كود المصدر

swiftype search jquery

شفرة المصدر الأخرى

v1.1.0

تنزيل

شعار البحث المرن في الموقع

مكون إضافي jQuery لبحث المواقع المرنة من الطرف الأول للبحث في مواقع الويب.

محتويات

ابدء
الاستخدام
البرنامج التعليمي للتخصيص
التعليمات
يساهم
رخصة

ابدء ؟

متطلبات:

حساب بحث الموقع. قم بالتسجيل على موقع Swiftype.com.
محرك بحث الموقع مع بعض البيانات فيه.

قم بتضمين ما يلي في رأس صفحة الويب الخاصة بك:

أحدث نسخة من مسج
البرنامج المساعد Swiftype Search jQuery
(اختياري) ورقة أنماط بحث Swiftype

كل ذلك معًا يجب أن يبدو كما يلي:

 < script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.search.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" search.css " media =" all " />

ملاحظة: تم تطوير هذا العميل لنقاط نهاية Elastic Site Search API فقط. يمكنك الرجوع إلى وثائق Elastic Site Search API للحصول على سياق إضافي.

الاستخدام

ابدأ بوجود هذه العناصر الثلاثة على الأقل في الصفحة: نموذج، وحقل إدخال داخل النموذج، وحاوية للنتائج.

 < form >
  < input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div >

قم بتطبيق طريقة Swiftype على حقل إدخال بحث موجود داخل نموذج على صفحة الويب الخاصة بك وقم بتوفير حاوية للنتائج. على سبيل المثال، قم بإضافته إلى حقل إدخال البحث بالمعرف st-search-input كما يلي:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  resultContainingElement : '#st-results-container' ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

تأكد من تغيير سمة engineKey الموضحة أعلاه لتتوافق مع السمة المخصصة لمحرك بحث Swiftype الخاص بك. إذا كنت تستخدم واجهة الويب، فسيتم إدراج مفتاح محرك البحث في الصفحة الأولى من لوحة المعلومات الخاصة بك.

البرنامج التعليمي للتخصيص

تمت كتابة هذا البرنامج المساعد ليكون مرنًا بناءً على حالة الاستخدام المحددة الخاصة بك. على سبيل المثال، قد ترغب في استرداد المزيد من البيانات لكل نتيجة، أو تخصيص طريقة عرض البيانات للمستخدم، أو تقييد استعلام البحث على عناصر معينة في محرك البحث الخاص بك.

دعنا نذهب من خلال مثال يفعل كل هذا. في هذا المثال، لنفترض أنك اتبعت البرنامج التعليمي QuickStart الخاص بـ Ruby Gem، والآن لديك بيانات خاصة بمكتبة مفهرسة في محرك البحث النموذجي الخاص بك.

تغيير عدد النتائج لكل صفحة

لتحديد عدد النتائج لكل صفحة، استخدم السمة perPage .

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
  perPage : 20
} ) ;

القيمة القصوى التي سيتم احترامها بواسطة API هي 100.

إرجاع مقتطف تمييز مطابق

أي حقول يتم الاستعلام عنها أثناء البحث ستعيد المطابقة العليا (إن وجدت) في خاصية التمييز الخاصة بالنتائج. تحتوي كافة المقتطفات في هذا النموذج على كيانات HTML من النص الأصلي المشفر. يتم تحديد التمييز الفعلي باستخدام علامات <em> (غير مشفرة).

يمكنك تخصيص الحقول التي يتم إرجاعها في خاصية التمييز باستخدام خيار highlightFields :

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
  highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ;

يقبل خيار highlightFields تجزئة تحتوي على الحقول التي تريد تمييزها لكل كائن من كل نوع مستند. لكل حقل، حدد size باعتباره الحد الأقصى لعدد الأحرف المطلوب تضمينها في المقتطف. قم بتعيين fallback على "صحيح" لفرض تضمين مقتطف غير مميز إذا لم يكن التمييز متاحًا لهذا الحقل.

راجع ملف custom.html للحصول على مثال إضافي لـ highlightFields .

جلب الحقول التي تحددها فقط

لتحديد الحقول التي ترغب في إرجاعها من واجهة برمجة التطبيقات (API)، قم بتعيين سمة fetchFields إلى تجزئة تحتوي على مصفوفة تسرد الحقول التي تريد إرجاعها لكل نوع مستند. على سبيل المثال، إذا قمت بفهرسة حقول title genre والحقول published_on لكل مستند، فيمكنك إعادتها كما يلي:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

سيتم إرجاع هذه الحقول الإضافية مع كل عنصر، ويمكن الوصول إليها في وظيفة العرض كما هو موضح في القسم التالي.

تخصيص العرض

الآن بعد أن أصبح لديك المزيد من البيانات لكل عنصر نتيجة، ستحتاج إلى تخصيص وظيفة عرض العنصر للاستفادة منها.

تظهر وظيفة العرض الافتراضية أدناه:

 var defaultRenderFunction = function ( document_type , item ) {
  return '<div class="st-result"><h3 class="title"><a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a></h3></div>' ;
} ;

تتوفر الحقول الإضافية كمفاتيح في قاموس العناصر، لذا يمكنك تخصيصها للاستفادة من حقل genre كما يلي:

 var customRenderFunction = function ( document_type , item ) {
  var out = '<a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a>' ;
  return out . concat ( '<p class="genre">' + item [ 'genre' ] + '</p>' ) ;
} ;

الآن، ما عليك سوى تعيين سمة renderFunction في قاموس الخيارات على customRenderFunction الخاص بك لإخبار المكون الإضافي الخاص بنا باستخدام وظيفتك لعرض النتائج:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

تقييد المطابقة لحقول معينة

افتراضيًا، ستقوم مكتبة بحث Swiftype بمطابقة الاستعلام المقدم مع أي string أو حقل text لمستنداتك. لذا، إذا كنت ترغب في التأكد من أنه يطابق فقط الإدخالات الموجودة في حقل title ، على سبيل المثال، يمكنك تحديد خيار searchFields :

 $('#st-search-input').swiftypeSearch({
  renderFunction: customRenderFunction,
  fetchFields: {'books': ['title','genre','published_on']},
  searchFields: {'books': ['title']},
  engineKey: 'jaDGyzkR6iYHkfNsPpNK'
});

على غرار خيار fetchFields ، يقبل searchFields تجزئة تحتوي على مصفوفة من الحقول لكل مستند_نوع تريد أن يتطابق معه استعلام المستخدم.

تحديد شروط الاستعلام الإضافية

لنفترض الآن أنك تريد فقط أن تعرض نتائجك الكتب التي تنتمي إلى genre الخيالي والمتاحة . لتقييد نتائج البحث، يمكنك تمرير شروط استعلام إضافية إلى واجهة برمجة تطبيقات البحث عن طريق تحديدها كقاموس في حقل filters . يتم دمج الجمل المتعددة في حقل المرشحات مع المنطق AND:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
  searchFields : { 'books' : [ 'title' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

إطلاق استعلام جديد

وفي بعض الحالات، قد تحتاج إلى إجراء بحث جديد يدويًا. يمكن استخدام الطريقة التالية للقيام بذلك. مثال على هذه الحالة هو إذا اختار المستخدم تطبيق عامل تصفية ويحتاج إلى تنفيذ استعلام جديد.