swiftype search jquery

ปลั๊กอิน jQuery Elastic Site Search บุคคลที่หนึ่งสำหรับการค้นหาเว็บไซต์

สารบัญ

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

---

การเริ่มต้น?

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

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

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

• jQuery เวอร์ชันล่าสุด
• ปลั๊กอิน Swifttype Search jQuery
• (ไม่บังคับ) สไตล์ชีต Swifttype Search

เมื่อรวมกันแล้วควรมีลักษณะดังนี้:

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

ใช้วิธี Swifttype กับช่องป้อนข้อมูลการค้นหาที่มีอยู่ภายในแบบฟอร์มบนหน้าเว็บของคุณและจัดเตรียมคอนเทนเนอร์สำหรับผลลัพธ์ ตัวอย่างเช่น เพิ่มลงในช่องป้อนข้อมูลการค้นหาด้วย id 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'
} ) ;

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

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

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

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

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

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

ทำให้เกิดคำถามใหม่

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

 Swiftype.reloadResults();

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

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

ใช่! หากคุณกำลังมองหาฟังก์ชันเติมข้อความอัตโนมัติ ลองดูปลั๊กอินเติมข้อความอัตโนมัติ Swifttype

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

หากมีบางอย่างไม่ทำงานตามที่คาดไว้ โปรดเปิดปัญหา

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

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

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

คุณสามารถตรวจสอบฟอรัมสนทนาของชุมชน Elastic Site Search ได้

มีส่วนช่วย

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

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

ใบอนุญาต ?

MIT © ยืดหยุ่น

ขอขอบคุณผู้มีส่วนร่วมทุกคน!