ホーム>プログラミング関連>その他のソースコード
ダウンロード

弾性サイト検索ロゴ

ファーストパーティの弾性サイト検索jQueryプラグイン検索オートコンプリートのためのプラグイン。

コンテンツ

  • はじめる
  • 使用法
  • カスタマイズチュートリアル
  • よくある質問
  • 貢献する
  • ライセンス

はじめる ？

要件：

  1. サイト検索アカウント。 swiftype.comにサインアップしてください。
  2. いくつかのデータが含まれているサイト検索エンジン。

Webページのヘッダーに以下を含めます。

  • 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ドキュメントを参照できます。

使用法

Webページの既存の検索入力フィールドにSWIFTYPEメソッドを適用するだけです。たとえば、次のように、ID st-search-inputを使用して検索入力フィールドに追加します。 

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

上記のengineKey属性を必ず変更して、SWIFTYPE検索エンジンに割り当てられた属性を一致させてください。 Webインターフェイスを使用している場合、検索エンジンキーはダッシュボードの最初のページにリストされています。

この簡単なインストールは、デフォルトでは、ユーザーが検索入力に入力している文字列と一致します。デフォルトでは、文字列は、型文字stringでインデックス付けされたフィールドと一致します。

カスタマイズチュートリアル

このプラグインは、特定のユースケースに基づいて柔軟になるように書かれています。たとえば、ドロップダウンの各要素のデータをさらに取得したり、データがユーザーに表示される方法をカスタマイズしたり、検索エンジンの特定の要素にオートコンプリートクエリを制限したりすることをお勧めします。

これらすべてを行う例を見てみましょう。この例では、Ruby GemのQuickStartチュートリアルに従ったと仮定します。これにより、Search Search Engineにインデックス付けされた書店のデータがあります。

結果の数を変更します

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>' ) ;
} ;

ここで、Options Dictionaryに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 AutoCompleteライブラリは、ユーザーがドキュメント用にインデックスされた任意の文字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である本を表示したいとしましょう。検索結果を制限するために、 filtersフィールドの辞書としてそれらを指定することにより、追加のクエリ条件を検索APIに渡すことができます。フィルターフィールド内の複数の条項が組み合わされており、ロジックは次のとおりです。 

 $ ( '#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' ] ;
} ;

これを変更するには、Autocompleteを初期化するときに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©Elastic

すべての貢献者に感謝します！

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて