หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

โลโก้การค้นหาไซต์ยืดหยุ่น

ปลั๊กอินการค้นหาไซต์ที่ยืดหยุ่นของบุคคลแรกสำหรับการค้นหาการค้นหาอัตโนมัติ

สารบัญ

  • เริ่มต้น
  • การใช้งาน
  • การสอนการปรับแต่ง
  • คำถามที่พบบ่อย
  • มีส่วนช่วย
  • ใบอนุญาต

เริ่มต้น?

ความต้องการ:

  1. บัญชีค้นหาไซต์ ลงทะเบียนที่ swiftype.com
  2. เครื่องมือค้นหาไซต์ที่มีข้อมูลบางอย่างอยู่ในนั้น

รวมสิ่งต่อไปนี้ในส่วนหัวของหน้าเว็บของคุณ:

  • jQuery เวอร์ชันล่าสุด
  • ปลั๊กอิน jQuery Swiftype
  • (ไม่บังคับ) Swiftype Autocomplete Stylesheet

ทั้งหมดเข้าด้วยกันควรมีลักษณะเช่นนี้: 

 < 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 การค้นหาไซต์ยืดหยุ่นสำหรับบริบทเพิ่มเติม

การใช้งาน

เพียงใช้เมธอด Swiftype กับฟิลด์อินพุตการค้นหาที่มีอยู่บนหน้าเว็บของคุณ ตัวอย่างเช่นเพิ่มลงในฟิลด์อินพุตค้นหาด้วย ID st-search-input ดังนี้: 

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

ตรวจสอบให้แน่ใจว่าได้เปลี่ยนแอตทริบิวต์ engineKey ที่แสดงด้านบนเพื่อให้ตรงกับที่กำหนดให้กับเครื่องมือค้นหา Swiftype ของคุณ หากคุณใช้เว็บอินเตอร์เฟสรหัสเครื่องมือค้นหาจะอยู่ในหน้าแรกของแผงควบคุมของคุณ

การติดตั้งอย่างง่ายนี้จะตรงกับค่าเริ่มต้นสตริงที่ผู้ใช้กำลังพิมพ์ลงในอินพุตการค้นหาของคุณไปยังรายการใด ๆ ที่จัดทำดัชนีในเครื่องมือค้นหาของคุณ โดยค่าเริ่มต้นสตริงจะถูกจับคู่กับฟิลด์ใด ๆ ที่คุณได้จัดทำดัชนีด้วยประเภท string

การสอนการปรับแต่ง

ปลั๊กอินนี้เขียนขึ้นเพื่อยืดหยุ่นตามกรณีการใช้งานเฉพาะของคุณ ตัวอย่างเช่นคุณอาจต้องการดึงข้อมูลเพิ่มเติมสำหรับแต่ละองค์ประกอบในแบบเลื่อนลงปรับแต่งวิธีการที่ข้อมูลจะแสดงต่อผู้ใช้หรือ จำกัด การสืบค้นการเติมข้อความอัตโนมัติให้เป็นองค์ประกอบบางอย่างของเครื่องมือค้นหาของคุณ

ลองผ่านตัวอย่างที่ทำทั้งหมดนี้ สำหรับตัวอย่างนี้สมมติว่าคุณได้ติดตามการสอน QuickStart สำหรับ Ruby Gem ของเราและตอนนี้คุณมีข้อมูลสำหรับร้านหนังสือที่จัดทำดัชนีในตัวอย่างเครื่องมือค้นหาของคุณ

การเปลี่ยนจำนวนผลลัพธ์

ในการระบุจำนวนผลลัพธ์ที่คุณต้องการส่งคืนจาก API ให้ตั้งค่า resultLimit ผลลัพธ์ตามดังนี้: 

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

ดึงเฉพาะฟิลด์ที่คุณระบุ

ในการระบุฟิลด์ที่คุณต้องการส่งคืนจาก API ให้ตั้งค่าแอตทริบิวต์ 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'
} ) ;

การ จำกัด การจับคู่กับฟิลด์เฉพาะ

โดยค่าเริ่มต้นไลบรารี Autocomplete Swiftype จะตรงกับสตริงที่ผู้ใช้กำลังพิมพ์ไปยังฟิลด์ string ใด ๆ ที่จัดทำดัชนีสำหรับเอกสารของคุณ ดังนั้นหากคุณต้องการตรวจสอบให้แน่ใจว่าตรงกับรายการในฟิลด์ title เรื่องเท่านั้นคุณสามารถระบุตัวเลือก searchFields : 

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

ในทำนองเดียวกันกับตัวเลือก fetchFields , searchFields ยอมรับแฮชที่มีอาร์เรย์ของฟิลด์สำหรับแต่ละ document_type ที่คุณต้องการคำถามของผู้ใช้ให้ตรงกัน

ระบุเงื่อนไขการสอบถามเพิ่มเติม

ตอนนี้สมมติว่าคุณต้องการให้การเติมข้อความอัตโนมัติของคุณแสดงหนังสือที่เป็น genre นิยาย และเป็น in_stock เพื่อ จำกัด ผลการค้นหาคุณสามารถผ่านเงื่อนไขการสืบค้นเพิ่มเติมไปยัง API การค้นหาโดยระบุว่าเป็นพจนานุกรมในฟิลด์ 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'
} ) ;

คำถามที่พบบ่อย?

ฉันสามารถใช้สิ่งนี้กับปลั๊กอินการค้นหา Swiftype ได้หรือไม่?

ใช่! หากคุณกำลังมองหาฟังก์ชั่นการค้นหาหลักชำระเงินให้กับปลั๊กอินการค้นหา Swiftype

ฉันจะรายงานปัญหากับลูกค้าได้ที่ไหน

หากสิ่งที่ไม่ได้ผลตามที่คาดไว้โปรดเปิดปัญหา

ฉันจะเรียนรู้เพิ่มเติมเกี่ยวกับการค้นหาไซต์ได้ที่ไหน

ทางออกที่ดีที่สุดของคุณคือการอ่านเอกสาร

ฉันจะไปขอความช่วยเหลือได้ที่ไหนอีก

คุณสามารถชำระเงินให้กับชุมชนการค้นหาไซต์ยืดหยุ่นพูดคุยฟอรัม

มีส่วนช่วย

เรายินดีต้อนรับผู้มีส่วนร่วมในโครงการ ก่อนที่คุณจะเริ่มมีโน้ตสองตัว ...

  • ก่อนที่จะเปิดคำขอดึงโปรดสร้างปัญหาเพื่อหารือเกี่ยวกับขอบเขตของข้อเสนอของคุณ
  • กรุณาเขียนรหัสง่าย ๆ และเอกสารย่อตามความเหมาะสม

ใบอนุญาต ?

MIT ©ยืดหยุ่น

ขอบคุณผู้สนับสนุนทุกคน!

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด