swiftype autocomplete jquery下載 - swiftype autocomplete jquery源代碼下載

swiftype autocomplete jquery

其他源碼

1.0.0

下載

彈性站點搜索徽標

搜索自動完成的第一方彈性網站搜索jQuery插件。

內容

入門
用法
定制教程
常問問題
貢獻
執照

入門？

要求：

站點搜索帳戶。在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端點開發。您可以參考有關其他上下文的彈性網站搜索API文檔。

用法

只需將SwifType方法應用於網頁上的現有搜索輸入字段即可。例如，將其添加到帶有ID st-search-input的搜索輸入字段中，如下所示：

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

請確保更改上面顯示的engineKey屬性，以匹配分配給SwifType搜索引擎的屬性。如果您使用的是Web界面，則搜索引擎鍵在儀表板的首頁上列出。

默認情況下，此簡單安裝將匹配用戶在搜索輸入中輸入的字符串與搜索引擎中索引的任何項目。默認情況下，字符串與您已用類型string索引的任何字段匹配。

定制教程

該插件根據您的特定用例而編寫為靈活。例如，您可能想在下拉列表中的每個元素中檢索更多數據，自定義向用戶顯示數據的方式，或將自動完整查詢限制為搜索引擎的某些元素。

讓我們介紹一個做所有這些的示例。在此示例中，假設您遵循了我們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>' ) ;
} ;

現在，只需在customRenderFunction選項詞典中設置renderFunction屬性，以告訴我們的插件使用您的函數來呈現結果：

 $ ( '#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接受了一個哈希，其中包含每個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'
} ) ;