swiftype search jquery
v1.1.0
用於網站搜尋的第一方 Elastic Site Search jQuery 外掛程式。
要求：
在網頁標題中包含以下內容：
總而言之，它應該看起來像這樣：
< 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 搜尋引擎的屬性。如果您使用的是 Web 介面，搜尋引擎金鑰將列在儀表板的第一頁。
該插件是根據您的特定用例靈活編寫的。例如，您可能希望為每個結果檢索更多數據，自訂向使用者顯示數據的方式，或將搜尋查詢限制為搜尋引擎的某些元素。
讓我們看一個完成所有這些操作的範例。對於此範例，假設您遵循了 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設為 true 以強制包含非突出顯示的片段。
有關highlightFields的其他範例，請參閱 custom.html 檔案。
若要指定您希望從 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接受一個散列，其中包含您希望使用者的查詢匹配的每個 document_type 的字段數組。
現在，假設您只希望結果顯示小說genre且in_stock的書籍。為了限制搜尋結果，您可以透過在filters欄位中將附加查詢條件指定為字典，將附加查詢條件傳遞給搜尋 API。過濾器欄位中的多個子句透過 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 自動完成外掛程式。
如果某些內容未如預期運作，請提出問題。
最好的選擇是閱讀文件。
您可以查看 Elastic Site Search 社群討論論壇。
我們歡迎對該專案的貢獻者。在開始之前，請注意以下幾點...
麻省理工學院©彈性
感謝所有貢獻者！
