1ページに1つの小さな広告のみを表示することをお約束します。ご心配なく、このメッセージを非表示にすると、二度と邪魔されることはありません。
タイプ
標準
検索は、結果のセットを表示できます
カテゴリ
検索は、カテゴリごとに並べられたリモートコンテンツからの結果を表示できます
ローカル検索
検索は、静的なローカルソース内の結果を検索できます。
$('.ui.search') .search({ source: content }) ;
var content = [ { title: 'Andorra' }, { title: 'United Arab Emirates' }, { title: 'Afghanistan' }, { title: 'Antigua' }, { title: 'Anguilla' }, { title: 'Albania' }, { title: 'Armenia' }, { title: 'Netherlands Antilles' }, { title: 'Angola' }, { title: 'Argentina' }, { title: 'American Samoa' }, { title: 'Austria' }, { title: 'Australia' }, { title: 'Aruba' }, { title: 'Aland Islands' }, { title: 'Azerbaijan' }, { title: 'Bosnia' }, { title: 'Barbados' }, { title: 'Bangladesh' }, { title: 'Belgium' }, { title: 'Burkina Faso' }, { title: 'Bulgaria' }, { title: 'Bahrain' }, { title: 'Burundi' } // など ];
ローカルカテゴリ検索2.3の新機能
検索は、静的なローカルソース内のカテゴリ結果を検索できます。
$('.ui.search') .search({ type: 'category', source: categoryContent }) ;
var categoryContent = [ { category: 'South America', title: 'Brazil' }, { category: 'South America', title: 'Peru' }, { category: 'North America', title: 'Canada' }, { category: 'Asia', title: 'South Korea' }, { category: 'Asia', title: 'Japan' }, { category: 'Asia', title: 'China' }, { category: 'Europe', title: 'Denmark' }, { category: 'Europe', title: 'England' }, { category: 'Europe', title: 'France' }, { category: 'Europe', title: 'Germany' }, { category: 'Africa', title: 'Ethiopia' }, { category: 'Africa', title: 'Nigeria' }, { category: 'Africa', title: 'Zimbabwe' }, ];
状態
読み込み中
検索は、読み込みインジケーターを表示できます
バリエーション
無効2.3.1の新機能
検索は、現在操作できないことを示すことができます
流動的
検索では、結果がコンテナの幅を占めるようにすることができます
整列
検索では、結果を左または右のコンテナの端に揃えることができます
初期化
自動ルーティング
デフォルトでは、検索は名前付きのAPIエンドポイント「search」に自動的にルーティングされます
// デフォルトのエンドポイント/search/{query}で初期化します $('.ui.search') .search({ type: 'category' }) ;
名前付きURL
カスタムAPI設定を指定して、URL、コールバック設定を調整したり、別のAPIアクションを指定したりできます。
$('.ui.search') .search({ // apiSettingsを操作して検索エンドポイントをカスタムエンドポイントに変更します apiSettings: { url: 'custom-search/?q={query}' }, type: 'category' }) ;
ローカルオブジェクト
ローカル検索結果を使用すると、一致する値を検索するjavacriptオブジェクトリテラルの指定されたプロパティを検索できます
searchFields設定を使用して、検索可能なフィールドを設定できます。ローカルオブジェクト検索では、標準の検索結果（カテゴリではない）のみを表示できます。
// 検索可能なオブジェクトの配列/オブジェクト全体を検索 var content = [ { title: 'Horse', description: 'An Animal', }, { title: 'Cow', description: 'Another Animal', } ] ; $('.ui.search') .search({ source : content, searchFields : [ 'title' ], fullTextSearch: false }) ;
サーバー応答
標準
{ "results": [ { "title": "結果タイトル", "url": "/optional/url/on/click", "image": "optional-image.jpg", "price": "オプションの価格", "description": "オプションの説明" }, { "title": "結果タイトル", "description": "結果の説明" } ], // 結果の下のオプションアクション "action": { "url": '/path/to/results', "text": "202件の結果をすべて表示" } }
カテゴリ
{ "results": { "category1": { "name": "カテゴリ1", "results": [ { "title": "結果タイトル", "url": "/optional/url/on/click", "image": "optional-image.jpg", "price": "オプションの価格", "description": "オプションの説明" }, { "title": "結果タイトル", "url": "/optional/url/on/click", "image": "optional-image.jpg", "price": "オプションの価格", "description": "オプションの説明" } ] }, "category2": { "name": "カテゴリ2", "results": [ { "title": "結果タイトル", "url": "/optional/url/on/click", "image": "optional-image.jpg", "price": "オプションの価格", "description": "オプションの説明" } ] } }, // 結果の下のオプションアクション "action": { "url": '/path/to/results', "text": "202件の結果をすべて表示" } }
結果の取得
ユニークID
結果にidプロパティが含まれていない場合は、結果が返されるときに各結果に対してキーが自動的に生成されます。
IDは結果内の位置を使用して生成されます。たとえば、最初の要素はID 1を受信し、最初のカテゴリ結果はID a1を受信します。
次に、idまたは検索結果のタイトルをget result(value)で使用して、結果オブジェクトを返すことができます。
// 現在のクエリ結果から、タイトルが「cat」の結果を取得 $('.ui.search') .search('get result', 'cat') ; // カテゴリ検索で、最初のカテゴリの最初の結果を取得 $('.ui.search') .search('get result', 'a1') ; // 標準検索で、最初の結果を取得 $('.ui.search') .search('get result', '1') ;
ビヘイビア
以下のすべての動作は、以下の構文を使用して呼び出すことができます。
$('.your.element') .search('動作名', 引数1, 引数2) ;
| 動作 | 説明 |
|---|---|
| query (callback) | 検索入力に現在設定されている値を検索します |
| display message(text, type) | 指定されたテキストとテンプレートマッチングタイプを使用して、検索結果にメッセージを表示します |
| cancel query | 現在のリモート検索クエリをキャンセルします |
| search local(query) | 指定されたクエリでローカルオブジェクトを検索し、結果を表示します |
| has minimum characters | 最小文字数があるかどうか |
| search remote(query, callback) | 指定されたクエリでリモートエンドポイントを検索し、結果を表示します |
| search object(query, object, searchFields) | 指定されたクエリでオブジェクトを検索し、結果を返します |
| cancel query | 現在のリモート検索リクエストをキャンセルします |
| is focused | 検索が現在フォーカスされているかどうか |
| is visible | 検索結果が表示されているかどうか |
| is empty | 検索結果が空かどうか |
| get value | 現在の検索値を返します |
| get result(value) | 検索されたタイトルまたはIDに一致するJSONオブジェクトを返します（上記参照） |
| set value(value) | 検索入力を指定された値に設定します |
| read cache(query) | クエリのキャッシュされた結果を読み取ります |
| clear cache(query) | キャッシュから値をクリアします。パラメータが渡されない場合は、すべてのキャッシュをクリアします |
| write cache(query) | クエリのキャッシュされた結果を書き込みます |
| add results(html) | HTMLを結果に追加して表示します |
| show results(callback) | 結果コンテナを表示します |
| hide results(callback) | 結果コンテナを非表示にします |
| generate results(response) | settings.templateで指定されたパーサーを使用して結果を生成します |
| destroy | すべてのイベントを削除します |
例
異なるレスポンスフィールドの使用
検索は非常に特定なAPIレスポンスを予期しますが、fieldsパラメータを使用すると、サーバーレスポンスから表示されるフィールドへのマッピングを簡単に変更できます。
$('.ui.search') .search({ apiSettings: { url: '//api.github.com/search/repositories?q={query}' }, fields: { results : 'items', title : 'name', url : 'html_url' }, minCharacters : 3 }) ;
API設定の使用
APIは、onResponseというコールバックを提供します。これは、サードパーティAPIを検索に必要なサーバーレスポンスに一致するように再構築するために使用できます。
また、mockResponseAsyncを使用して、検索を満たすためのカスタムバックエンドを使用することもできます。
$('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { onResponse: function(githubResponse) { var response = { results : {} } ; // GitHub APIレスポンスを検索で動作するように変換 $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // 新しい言語カテゴリを作成 if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // カテゴリに結果を追加 response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; }, url: '//api.github.com/search/repositories?q={query}' } }) ;
検索
動作
| デフォルト | 説明 | |
|---|---|---|
| apiSettings |
{ action: 'search' }
|
API呼び出しの設定。 |
| minCharacters | 1 | 結果をクエリするための最小文字数 |
| searchOnFocus | true | フォーカス時に検索で結果を表示するかどうか（最小文字数とも一致する必要があります） |
| transition | fade | メニューの表示/非表示のアニメーションに使用する名前付きトランジション。フェードとスライドダウンは、uiトランジションを含めなくても利用できます |
| duration | 300 | アニメーションイベントの期間 |
| maxResults | 7 | ローカル検索と単純検索を使用する場合に表示する最大結果数、カテゴリ検索の最大カテゴリ数 |
| cache | true | サーバーへの再クエリを回避するために、結果をローカルにキャッシュします |
| source | false | ローカルに検索されるJavaScriptオブジェクトを指定します |
| selectFirstResult | false | 検索後に検索が最初の検索結果を自動的に選択するかどうか |
| showNoResults | false | 結果が見つからない場合に「結果なし」メッセージを表示するかどうか。（これらのメッセージは、以下で指定されたtemplateオブジェクトを使用して変更できます） |
| fullTextSearch | 'exact' | "true"を指定すると、ファジーフルテキスト検索が使用され、"exact"に設定すると、文字列のどこかに正確な検索が一致するように強制されます。falseに設定すると、文字列の先頭にのみ一致します。（この設定は以前はsearchFullTextと呼ばれていました。） |
| fields |
fields: { categories : 'results', // カテゴリの配列（カテゴリビュー） categoryName : 'name', // カテゴリ名（カテゴリビュー） categoryResults : 'results', // 結果の配列（カテゴリビュー） description : 'description', // 結果の説明 image : 'image', // 結果の画像 price : 'price', // 結果の価格 results : 'results', // 結果の配列（標準） title : 'title', // 結果のタイトル action : 'action', // 「詳細を表示」オブジェクト名 actionText : 'text', // 「詳細を表示」テキスト actionURL : 'url' // 「詳細を表示」url }
|
APIまたはsourceのいずれかを使用して、表示コンテンツをJSONプロパティにマッピングするリスト。 |
| searchFields |
[ 'title', 'description' ]
|
検索されるローカルソースオブジェクト内のオブジェクトプロパティを指定します |
| hideDelay | 0 | 検索のフォーカスが外れた後、結果を非表示にするまでの遅延 |
| searchDelay | 100 | 入力変更時に結果をクエリするまでの遅延 |
| easing | easeOutExpo | フォールバックJavaScriptアニメーションを使用する場合のイージング方程式 |
コールバック
| コンテキスト | 説明 | |
|---|---|---|
| onSelect(result, response) | モジュール | ユーザーによる要素選択時のコールバック。最初のパラメータには、その要素のフィルタリングされたレスポンス結果が含まれます。関数は、デフォルトのアクション（検索結果を閉じて値を選択すること）を防ぐためにfalseを返す必要があります。 |
| onResultsAdd(html) | モジュール | 結果にHTMLを追加するための要素テンプレートの処理後のコールバック。関数は、デフォルトのアクションを防ぐためにfalseを返す必要があります。 |
| onSearchQuery(query) | モジュール | 検索クエリのコールバック |
| onResults(response) | モジュール | サーバーレスポンスのコールバック |
| onResultsOpen | 結果要素 | 結果が開かれたときのコールバック |
| onResultsClose | 結果要素 | 結果が閉じられたときのコールバック |
テンプレート
これらのテンプレートは、検索結果のHTML構造を生成するために使用されます
| 関数 | |
|---|---|
| templates |
$.fn.search.settings.templates : { escape: function(string) { // 挿入された結果のエスケープされた文字列を返します }, message: function(message, type) { // 指定されたメッセージとタイプのメッセージのhtmlを返します }, category: function(response) { // カテゴリ結果のhtmlを返します }, standard: function(response) { // 標準結果のhtmlを返します } }
|
モジュール
これらの設定はすべてのモジュールにネイティブであり、コンポーネントがコンテンツをDOM属性に結び付ける方法と、モジュールのデバッグ設定を定義します。
| デフォルト | 説明 | |
|---|---|---|
| name | 検索 | ログステートメントで使用される名前 |
| namespace | search | イベント名前空間。モジュールのティアダウンが要素に添付された他のイベントに影響を与えないようにします。 |
| regExp |
regExp: { escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, beginsWith : '(?:\s|^)' }
|
マッチングに使用される正規表現 |
| selector |
selector : { prompt : '.prompt', searchButton : '.search.button', results : '.results', category : '.category', result : '.result' }
|
モジュールの部分を見つけるために使用されるセレクター |
| metadata |
metadata: { cache : 'cache', results : 'results' }
|
内部で使用されるHTML5メタデータ属性 |
| className |
className: { active : 'active', empty : 'empty', focus : 'focus', loading : 'loading', pressed : 'down' }
|
要素の状態を判断するために使用されるクラス名 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を抑制します。 |
| debug | false | コンソールへのデバッグ出力 |
| performance | true | パフォーマンスメトリクスを含むconsole.table出力を表示します |
| verbose | false | デバッグ出力には、すべての内部動作が含まれます |
| errors |
error : { source : '検索できません。ソースが使用されておらず、Semantic APIモジュールが含まれていません', noResults : '検索結果がありませんでした', logging : 'デバッグログでエラーが発生しました。終了します。', noTemplate : '有効なテンプレート名が指定されていません。', serverError : 'サーバーのクエリに問題がありました。', maxResults : 'maxResults設定を使用するには、結果が配列である必要があります', method : '呼び出したメソッドは定義されていません。' },
|
|