[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Input.Autocomplete

AutoComplete クラス

AutoComplete コントロールは、ユーザー入力時に入力文字列に従って呼び出し元で項目リストをカスタマイズできる入力コントロールです。

このコントロールはComboBox に似ていますが、 項目ソースが静的なリストではなく関数（itemsSourceFunction ）である点が異なります。たとえば、ユーザーの入力に従ってリモートデータベースの項目を検索できます。 次の例では、AutoComplete コントロールを作成し、'countries'配列を使用してリストの内容を設定します。 ユーザーが文字を入力すると自動的に国が検索され、候補が絞り込まれて現在の入力と一致するものだけになります。

Example

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new AutoComplete(element: any, options?: any): AutoComplete

  • AutoComplete クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      このコントロールをホストするDOM要素またはホスト要素のセレクタ（'#theCtrl'など）。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 AutoComplete

プロパティ

autoExpandSelection

autoExpandSelection: boolean

コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

collectionView

collectionView: ICollectionView

項目ソースとして使用されるICollectionView オブジェクトを取得します。

cssMatch

cssMatch: string

検索語と一致するすべての部分をコンテンツで強調表示するために使用する CSSクラスの名前を取得または設定します。

delay

delay: number

キーストロークが発生してから検索が実行されるまでの遅延（ミリ秒単位）を取得または設定します。

このプロパティのデフォルト値は500ミリ秒です。

displayMemberPath

displayMemberPath: string

項目の視覚表示として使用するプロパティの名前を取得または設定します。

dropDown

dropDown: HTMLElement

isDroppedDown プロパティがtrueに設定されているときに表示されるドロップダウン要素を取得します。

dropDownCssClass

dropDownCssClass: string

コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。

このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。 ドロップダウン要素は、 コントロール自体の子としてではなく、ドキュメントボディの子として表示され、 親コントロールに基づいてCSSセレクタを使用することができないためです。

headerPath

headerPath: string

コントロールの入力要素に表示される値を取得するために使用するプロパティ名を取得または設定します。

このプロパティのデフォルト値はnullです。この場合、コントロールは、 ドロップダウンリストの選択項目と同じ内容を入力要素に表示します。

入力要素に表示される値をドロップダウンリストに表示される値とは切り離す場合は、 このプロパティを使用します。たとえば、入力要素には項目名を表示し、 ドロップダウンリストには追加情報を表示することができます。

hostElement

hostElement: HTMLElement

コントロールをホストしているDOM要素を取得します。

inputElement

inputElement: HTMLInputElement

コントロールによってホストされているHTML入力要素を取得します。

このプロパティは、入力要素の属性をカスタマイズする場合に使用します。

inputType

inputType: string

コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。

このプロパティのデフォルト値はtextです。

isAnimated

isAnimated: boolean

ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isContentHtml

isContentHtml: boolean

ドロップダウンリストに項目をプレーンテキストとして表示するか、HTMLとして表示するかを 示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isDisabled

isDisabled: boolean

コントロールが無効かどうかを判定する値を取得または設定します。

無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。

isDroppedDown

isDroppedDown: boolean

ドロップダウンが現在表示されているかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isEditable

isEditable: boolean

入力要素の内容をitemsSource コレクション内の項目に 制限するかどうかを決定する値を取得または設定します。

このプロパティは、デフォルトで ComboBox コントロールに対してfalseに設定され、AutoComplete および InputTime コントロールに対してtrueに設定されます。

isReadOnly

isReadOnly: boolean

ユーザーがマウスとキーボードを使用してコントロール値を変更できるかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isRequired

isRequired: boolean

コントロール値をnull以外の値に設定する必要があるか、 それとも（コントロールのコンテンツを削除することで）nullに設定できるかを 決定する値を取得または設定します。

このプロパティは、{@ link ComboBox}、{@ link InputDate}、{@ link InputTime}、{@ link InputDateTime}、 およびInputColor などのほとんどのコントロールに対してデフォルトでtrueに設定されます。 AutoComplete コントロールに対してデフォルトでfalseに設定されます。

isTouching

isTouching: boolean

現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

コントロールが現在更新中かどうかを示す値を取得します。

itemFormatter

itemFormatter: Function

ドロップダウンリストに表示される値のカスタマイズに使用される関数を取得または設定します。 この関数は、2つの引数として項目インデックスとデフォルトのテキストまたはHTMLを 受け取り、表示する新しいテキストまたはHTMLを返します。

書式設定関数がスコープ（意味のある'this'値など）を必要とする場合は、 'bind'関数を使用してフィルタを設定し、 'this'オブジェクトを指定してください。次に例を示します。 

  comboBox.itemFormatter = customItemFormatter.bind(this);
  function customItemFormatter(index, content) {
    if (this.makeItemBold(index)) {
      content = '<b>' + content + '</b>';
    }
    return content;
  }

itemsSource

itemsSource: any

選択リストの項目を含む配列またはICollectionView オブジェクトを取得または設定します。

このプロパティを配列に設定すると、ComboBox は ComboBox.collectionView プロパティによって公開される内部 ICollectionView オブジェクトを作成します。

ComboBox の選択は、その ComboBox.collectionView 内の現在の項目によって決定されます。デフォルトでは、コレクションの最初の項目に設定されます。 この動作を変更するには、ComboBox.collectionView の {@link wijmo.collections.CollectionView.currentItem} プロパティをnullに設定します。

itemsSourceFunction

itemsSourceFunction: Function

ユーザーの入力に従ってリスト項目を動的に提供する関数を取得または設定します。

この関数は以下の3つのパラメーターをとります。

  • ユーザーが入力したクエリー文字列
  • 返す項目の最大数
  • 結果が取得されたときに呼び出すコールバック関数

例: 

autoComplete.itemsSourceFunction = function (query, max, callback) {
  // サーバーから結果を取得します
  var params = { query: query, max: max };
  $.getJSON('companycatalog.ashx', params, function (response) {
    // コントロールに結果を返します
    callback(response);
  });
};

listBox

listBox: ListBox

ドロップダウンに示されているListBox コントロールを取得します。

maxDropDownHeight

maxDropDownHeight: number

ドロップダウンリストの最大の高さを取得または設定します。

maxDropDownWidth

maxDropDownWidth: number

ドロップダウンリストの最大の幅を取得または設定します。

ドロップダウンリストの幅は、コントロール自体の幅によっても制限されます （その値はドロップダウンの最小幅を表します）。

maxItems

maxItems: number

ドロップダウンリストに表示する項目の最大数を取得または設定します。

このプロパティのデフォルト値は6です。

minLength

minLength: number

オートコンプリート候補を検索するために必要な入力の最小長さを取得または設定します。

このプロパティのデフォルト値は2です。

placeholder

placeholder: string

コントロールが空のときにヒントとして表示される文字列を取得または設定します。

rightToLeft

rightToLeft: boolean

要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。

searchMemberPath

searchMemberPath: string

項目の検索時に使用するプロパティのカンマ区切りリストを含む文字列を取得または設定します。

デフォルトでは、AutoComplete コントロールは、displayMemberPath プロパティで指定された プロパティと比較して一致を検索します。searchMemberPath プロパティを使用すると、 追加のプロパティを使用して検索を行うことができます。

たとえば、以下のコードは、会社名を表示し、 会社名、シンボル、および国に基づいて検索を行います。

import { AutoComplete } from '@grapecity/wijmo.input';
var ac = new AutoComplete('#autoComplete', {
  itemsSource: companies,
  displayMemberPath: 'name',
  searchMemberPath: 'symbol,country'
});

selectedIndex

selectedIndex: number

ドロップダウンリストで現在選択されている項目のインデックスを取得または設定します。

selectedItem

selectedItem: any

ドロップダウンリストで現在選択されている項目を取得または設定します。

selectedValue

selectedValue: any

selectedValuePath を使用して取得されたselectedItem の値を取得または設定します。

selectedValuePath プロパティが設定されていない場合は、コントロールの selectedItem プロパティの値を取得または設定します。 itemsSource プロパティが設定されていない場合は、 コントロールの text プロパティの値を取得または設定します。

selectedValuePath

selectedValuePath: string

selectedValue をselectedItem から取得するために使用するプロパティの名前を 取得または設定します。

showDropDownButton

showDropDownButton: boolean

コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

showGroups

showGroups: boolean

データグループを区切るためにドロップダウン ListBox に グループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。

データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのICollectionView.groupDescriptions プロパティを変更します。

このプロパティのデフォルト値はfalseです。

text

text: string

コントロールに表示されるテキストを取得または設定します。

trimText

trimText: boolean

先頭および末尾のスペースを削除してコントロールの入力要素の値を トリミングするかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値は trueです。

ドロップダウンリストの項目の前後のスペースを確認するには、 次のようなCSSルールを適用する必要があります。

  .wj-listbox-item {
     white-space: pre;
  }

静的 controlTemplate

controlTemplate: string

DropDown コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

メソッド

addEventListener

  • addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void

  • このControl が所有する要素にイベントリスナーを追加します。

    コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener ) メソッドを参照してください）。

    イベントリスナーを削除しないと、メモリリークが発生する可能があります。

    デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。

    passive　イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。

    引数

    • target: EventTarget

      イベントのターゲット要素。

    • type: string

      イベントを指定する文字列。

    • fn: any

      イベントが発生したときに実行する関数。

    • オプション capture: boolean

      リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。

    • オプション passive: boolean

      ハンドラーが preventDefault() を呼び出さないことを示します。

    戻り値 void

applyTemplate

  • applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

  • コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。

    このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出され、 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。 以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。

    this.applyTemplate('wj-control wj-inputnumber', template, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    引数

    • classNames: string

      コントロールのホスト要素に追加するクラスの名前。

    • template: string

      コントロールのテンプレートを定義するHTML文字列。

    • parts: Object

      パーツ変数とその名前のディクショナリー。

    • オプション namePart: string

      ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    戻り値 HTMLElement

beginUpdate

  • beginUpdate(): void

deferUpdate

  • deferUpdate(fn: Function): void

  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。

    引数

    • fn: Function

      実行する関数。

    戻り値 void

endUpdate

  • endUpdate(): void

focus

  • focus(): void

  • このコントロールにフォーカスを設定します。

    戻り値 void

getDisplayText

  • getDisplayText(index?: number): string

  • 指定したインデックスにある項目に対して表示される文字列を（プレーンテキストとして）取得します。

    引数

    • オプション index: number

      テキストを取得する項目のインデックス。

    戻り値 string

getTemplate

  • getTemplate(): string

  • コントロールのインスタンスの作成に使用されたHTMLテンプレートを取得します。

    このメソッドは、クラス階層をさかのぼってコントロールのテンプレートを指定する最も近い祖先を探します。 たとえば、ComboBox コントロールのプロトタイプを指定した場合、 そのプロトタイプによってDropDown 基本クラスで定義されたテンプレートがオーバーライドされます。

    戻り値 string

hasOwnProperty

  • hasOwnProperty(v: PropertyKey): boolean

  • オブジェクトが指定されたプロパティを持つかどうかを判定します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

indexOf

  • indexOf(text: string, fullMatch: boolean): number

  • 指定した文字列と一致する最初の項目のインデックスを取得します。

    引数

    • text: string

      検索するテキスト。

    • fullMatch: boolean

      完全一致で検索するか、前方一致で検索するか。

    戻り値 number

initialize

  • initialize(options: any): void

  • 指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。

    このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。

    例: 

    grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 }
  ]
});
// これは以下と同等です。
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// など

    初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。

    引数

    • options: any

      初期化データを含むオブジェクト。

    戻り値 void

invalidate

  • invalidate(fullUpdate?: boolean): void

  • 非同期更新を発生させるため、コントロールを無効にします。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうか。

    戻り値 void

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

  • オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。

    引数

    • v: Object

      プロトタイプチェーンが判定される別のオブジェクト。

    戻り値 boolean

onItemsSourceChanged

onRefreshed

onRefreshing

onSelectedIndexChanged

  • onSelectedIndexChanged(e?: EventArgs): void

onTextChanged

propertyIsEnumerable

  • propertyIsEnumerable(v: PropertyKey): boolean

  • 指定されたプロパティが列挙可能かどうかを判断します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

removeEventListener

  • removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

  • このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。

    引数

    • オプション target: EventTarget

      イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます

    • オプション type: string

      イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。

    • オプション fn: any

      削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。

    • オプション capture: boolean

      リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。

    戻り値 number

selectAll

  • selectAll(): void

  • コントロールにフォーカスを設定してそのすべての内容を選択します。

    戻り値 void

toLocaleString

  • toLocaleString(): string

  • 現在のロケールを使用して文字列に変換された日付を返します。

    戻り値 string

toString

  • toString(): string

  • オブジェクトの文字列表現を返します。

    戻り値 string

valueOf

  • valueOf(): Object

  • 指定されたオブジェクトのプリミティブ値を返します。

    戻り値 Object

静的 disposeAll

  • disposeAll(e?: HTMLElement): void

  • HTML要素に含まれるすべてのWijmoコントロールを破棄します。

    引数

    • オプション e: HTMLElement

      コンテナー要素。

    戻り値 void

静的 getControl

  • getControl(element: any): Control

  • 指定したDOM要素でホストされているコントロールを取得します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    戻り値 Control

静的 invalidateAll

  • invalidateAll(e?: HTMLElement): void

  • 指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。

    このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

静的 refreshAll

  • refreshAll(e?: HTMLElement): void

  • HTML要素で存在するすべてのWijmoコントロールを更新する。

    コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

イベント

formatItem

formatItem: Event

ドロップダウンリストの項目が作成されると発生するイベント。

このイベントを使用して、リスト項目のHTMLを変更できます。 詳細については、ListBox.formatItem イベントを参照してください。

gotFocus

gotFocus: Event

コントロールがフォーカスを取得したときに発生します。

isDroppedDownChanged

isDroppedDownChanged: Event

ドロップダウンが表示または非表示になった後に発生します。

isDroppedDownChanging

isDroppedDownChanging: Event

ドロップダウンが表示または非表示になる前に発生します。

itemsSourceChanged

itemsSourceChanged: Event

itemsSource プロパティの値が変化すると発生します。

lostFocus

lostFocus: Event

コントロールがフォーカスを失ったときに発生します。

refreshed

refreshed: Event

コントロールが内容を更新した後で発生します。

refreshing

refreshing: Event

コントロールが内容を更新する直前に発生します。

selectedIndexChanged

selectedIndexChanged: Event

selectedIndex プロパティの値が変更されたときに発生します。

textChanged

textChanged: Event

text プロパティの値が変更されたときに発生します。