swiftype search jquery
v1.1.0
Web サイト検索用のファーストパーティ Elastic Site Search jQuery プラグイン。
要件：
Web ページのヘッダーに次の内容を含めます。
すべて合わせると次のようになります。
< 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 ドキュメントを参照してください。
まず、フォーム、フォーム内の入力フィールド、結果のコンテナという少なくとも 3 つの要素をページ上に配置します。
< form >
< input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div > Web ページ上のフォーム内の既存の検索入力フィールドに swiftype メソッドを適用し、結果のコンテナを提供します。たとえば、次のように 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 Autocomplete プラグインをチェックしてください。
何かが期待どおりに動作しない場合は、問題を開いてください。
最善の策は、ドキュメントを読むことです。
Elastic Site Search コミュニティのディスカッション フォーラムをチェックアウトしてください。
プロジェクトへの貢献者を歓迎します。始める前に、いくつか注意事項があります...
MIT © エラスティック
貢献者の皆様、ありがとうございました！
