تنزيل swiftype autocomplete jquery - تنزيل رمز مصدر swiftype autocomplete jquery

swiftype autocomplete jquery

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

1.0.0

تنزيل

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

مسند JQuery Search Search Search Search Search المرن من أجل البحث التلقائي.

محتويات

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

ابدء ؟

متطلبات:

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

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

أحدث إصدار من jQuery
المكون الإضافي swiftype jquery
(اختياري) ورقة أنماط الإكمال التلقائي swiftype

كل ذلك يجب أن يبدو هكذا:

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

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

الاستخدام

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

 $ ( '#st-search-input' ) . swiftype ( {
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

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

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

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

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

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

تغيير عدد النتائج

لتحديد عدد النتائج التي ترغب في إرجاعها من واجهة برمجة التطبيقات ، قم بتعيين سمة resultLimit على النحو التالي:

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

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

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

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

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

تخصيص الشاشة

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

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

 var defaultRenderFunction = function ( document_type , item ) {
  return '<p class="title">' + Swiftype . htmlEscape ( item [ 'title' ] ) + '</p>' ;
} ;

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

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

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

 $ ( '#st-search-input' ) . swiftype ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'url' ] } , // Fetch the URL field as a raw field.
  highlightFields : { 'books' : { 'title' : { 'size' : 60 , 'fallback' : true } , 'genre' : { 'size' : 60 , 'fallback' : true } , 'published_on' : { 'size' : 15 , 'fallback' : true } } } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

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

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

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

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

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

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

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

تغيير ما يحدث عند تحديد عنصر في القائمة المنسدلة

لتغيير ما يحدث عند النقر على عنصر ما ، تحتاج إلى توفير وظيفة معالج onComplete .

بشكل افتراضي ، سيقوم النقر فوق عنصر في القائمة المنسدلة بتنفيذ معالج onComplete التالي ، والذي يوجه المستخدم إلى خاصية عنوان url للعنصر المحدد:

 var defaultOnComplete = function ( item , prefix ) {
  window . location = item [ 'url' ] ;
} ;

لتغيير هذا ، ما عليك سوى توفير وظيفة معالج جديدة في خيار onComplete عند تهيئة الإكمال التلقائي.

فيما يلي مثال يقوم بتحديث قيمة الإدخال بعنوان العنصر المحدد:

 var input ; // Save a reference to the autocomplete dropdown
input = $ ( '#st-search-input' ) . swiftype ( {
  onComplete : function ( selectedItem ) {
    input . val ( selectedItem [ 'title' ] ) ; // Update the autocomplete dropdown's value
  } ,
  fetchFields : { 'books' : [ 'title' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;