Framework7-オートコンプリート

説明

オートコンプリートは、Framework7のモバイルフレンドリーでタッチに最適化されたコンポーネントであり、ドロップダウンとして、またはスタンドアロンで使用できます。 JavaScriptメソッドを使用して、オートコンプリートインスタンスを作成および初期化できます-

myApp.autocomplete(parameters)

_parameters_は、オートコンプリートインスタンスの初期化に使用される必須オブジェクトです。

オートコンプリートパラメーター

次の表に、Framework7で使用可能なオートコンプリートパラメーターを示します-

S.No	Parameters & Description	Type	Default
1	openIn ドロップダウン、ポップアップ、またはページとして使用できるオートコンプリートを開く方法を定義します。	string	page
2	source オートコンプリートインスタンス、検索クエリ、レンダリング関数を使用して、一致したアイテムを配列で渡します。	function (autocomplete, query, render)	-
3	valueProperty 一致したアイテムオブジェクトのキーのアイテム値を指定します。	string	id
4	limit クエリごとにオートコンプリートの限られた数のアイテムが表示されます。	number	-
5	preloader プリローダーを使用して、オートコンプリートレイアウトをtrueに設定することで指定できます。	boolean	false
6	preloaderColor プリローダーの色を指定します。デフォルトでは、色は「黒」です。	string	-
7	value デフォルトの選択値で配列を定義します。	array	-
8	textProperty 一致するアイテムオブジェクトのキーのアイテム値を指定します。これは、表示されるオプションのタイトルとして使用できます。	string	text

スタンドアロンのオートコンプリートパラメーター

次の表に、Framework7で使用可能なスタンドアロンオートコンプリートパラメーターを示します-

S.No	Parameters & Description	Type	Default
1	opener これは、文字列またはHTML要素のパラメーターであり、スタンドアロンのオートコンプリートページを開きます。	string or HTMLElement	-
2	popupCloseText オートコンプリートポップアップを閉じるために使用されます。	string	'Close'
3	backText オートコンプリートがページとして開かれたときに戻るリンクを提供します。	string	'Back'
4	pageTitle オートコンプリートページのタイトルを指定します。	string	-
5	searchbarPlaceholderText 検索バーのプレースホルダーテキストを指定します。	string	'Search'
6	searchbarCancelText 検索バーのキャンセルボタンのテキストを定義します。	string	'cancel'
7	notFoundText 一致する要素が見つからない場合にテキストを表示します。	string	'Nothing found'
8	multiple trueに設定することにより、複数選択を選択できます。	boolean	false
9	navbarTheme navbarのカラーテーマを指定します。	string	-
10	backOnSelect ユーザーが値を選択すると、オートコンプリートはtrueに設定されて閉じられます。	boolean	false
11	formTheme フォームのカラーテーマを指定します。	string	-

ドロップダウンオートコンプリートパラメーター

次の表に、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示します-

S.No	Parameters & Description	Type	Default
1	input テキスト入力に使用される文字列またはHTML要素です。	string or HTMLElement	-
2	dropdownPlaceholderText ドロップダウンプレースホルダーテキストを指定します。	string	-
3	updateInputValueOnSelect trueに設定することにより、selectの入力値を更新できます。	boolean	true
4	expandInput item-input itをtrueに設定すると、リストビューでテキスト入力を展開して、ドロップダウン中に全画面を表示できます。	boolean	false

オートコンプリートコールバック関数

以下の表は、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示しています-

S.No

Parameters & Description

Type

Default

1

onChange

オートコンプリートの値が変更されるたびに、このコールバック関数が実行されます。

function (autocomplete, value)

-

2

onOpen

オートコンプリートが開かれるたびに、このコールバック関数が実行されます。

function (autocomplete)

-

3

onClose

オートコンプリートが閉じられるたびに、このコールバック関数が実行されます。

function (autocomplete)

-

オートコンプリートテンプレート

次の表に、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示します-

S.No	Parameters & Description	Type	Default
1	navbarTemplate スタンドアロンのオートコンプリートnavbarテンプレートです。	string	-
2	itemTemplate スタンドアロンtemplate7フォームアイテムです。	string	-
3	dropdownTemplate template7ドロップダウンテンプレートです。	string	-
4	dropdownItemTemplate template7ドロップダウンリスト項目です。	string	-
5	dropdownPlaceholderTemplate template7ドロップダウンプレースホルダーアイテムです。	string	-

デフォルトのテンプレート

以下は、上記で定義されたテンプレートパラメータのデフォルトのテンプレートコードスニペットです-

navbarTemplate

<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
   <div class = "navbar-inner">
      <div class = "left sliding">
         {{#if material}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
               <i class = "icon icon-back"></i>
            </a>
         {{else}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
               <i class = "icon icon-back"></i>
               {{#if inPopup}}
                  <span>{{popupCloseText}}</span>
               {{else}}
                  <span>{{backText}}</span>
               {{/if}}
            </a>
         {{/if}}
      </div>

      <div class = "center sliding">{{pageTitle}}</div>
      {{#if preloader}}
         <div class = "right">
            <div class = "autocomplete-preloader preloader
               {{#if preloaderColor}}
                  preloader-{{preloaderColor}}
               {{/if}}">
            </div>
         </div>
      {{/if}}
   </div>
</div>

itemTemplate

<li>
   <label class = "label-{{inputType}} item-content">
      <input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
      {{#if material}}
         <div class = "item-media">
            <i class = "icon icon-form-{{inputType}}"></i>
         </div>

         <div class = "item-inner">
            <div class = "item-title">{{text}}</div>
         </div>
      {{else}}
         {{#if checkbox}}
            <div class = "item-media">
               <i class = "icon icon-form-checkbox"></i>
            </div>
         {{/if}}

         <div class = "item-inner">
            <div class = "item-title">{{text}}</div>
         </div>
      {{/if}}
   </label>
</li>

dropdownTemplate

<div class = "autocomplete-dropdown">
   <div class = "autocomplete-dropdown-inner">
      <div class = "list-block">
         <ul></ul>
      </div>
   </div>

   {{#if preloader}}
      <div class = "autocomplete-preloader preloader
         {{#if preloaderColor}}
            preloader-{{preloaderColor}}
         {{/if}}">
         {{#if material}}
            {{materialPreloaderHtml}}
         {{/if}}
      </div>
   {{/if}}
</div>

dropdownItemTemplate

<li>
   <label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

dropdownPlaceholderTemplate

<li class = "autocomplete-dropdown-placeholder">
   <div class = "item-content">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

オートコンプリートメソッド

次の表は、Framework7で利用可能なオートコンプリートメソッドを示しています-

S.No

方法と説明

1

*myAutocomplete.params*

オブジェクトとともに渡される初期化パラメーターを定義します。

2

*myAutocomplete.value*

選択した値で配列を定義します。

3

*myAutocomplete.opened*

trueに設定されている場合、オートコンプリートが開きます。

4

*myAutocomplete.dropdown*

Autocompleteドロップダウンのインスタンスを指定します。

5

*myAutocomplete.popup*

Autocompleteポップアップのインスタンスを指定します。

6

*myAutocomplete.page*

オートコンプリートページのインスタンスを指定します。

7

*myAutocomplete.pageData*

オートコンプリートページデータを定義します。

8

*myAutocomplete.searchbar*

Autocomplete検索バーインスタンスを定義します。

オートコンプリートプロパティ