ASP.NET MVC コントロールヘルプ
AutoComplete クラス
ファイル
wijmo.input.js
モジュール
wijmo.input
基本クラス
ComboBox
派生クラス
MultiAutoComplete
Show
   

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

The control is similar to the ComboBox, except the item source is a function (itemsSourceFunction) rather than a static list. For example, you can look up items on remote databases as the user types.

The example below creates an AutoComplete control and populates it using a 'countries' array. The AutoComplete searches for the country as the user types, and narrows down the list of countries that match the current input.

{@sample Input/AutoComplete/Overview/purejs Example}

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

constructor(element: any, options?: any): AutoComplete

Initializes a new instance of the AutoComplete class.

パラメーター
戻り値
AutoComplete

プロパティ

autoExpandSelection

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

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

継承元
DropDown
boolean

beginsWithSearch

Gets or sets a value that determines whether to search for items that begin with the given search term.

The default value for this property is **false**, which causes the control to search for items that contain the given search terms.

boolean

caseSensitiveSearch

検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。

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

継承元
ComboBox
boolean

clickAction

ユーザーがコントロールの入力要素をクリックしたときに実行する操作を決定する値を取得または設定します。

ほとんどのドロップダウンコントロールに対して、このプロパティはデフォルトで Select に設定されます。これにより、ユーザーはマウスでテキストの一部を選択できます。

編集不可のテキストを表示するドロップダウンコントロール(MultiSelectなど)の場合、このプロパティはデフォルトでToggleに設定されます。

継承元
DropDown
ClickAction

collectionView

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

継承元
ComboBox
ICollectionView

Static controlTemplate

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

継承元
DropDown
any

cssMatch

Gets or sets the name of the CSS class used to highlight any parts of the content that match the search terms.

The default value for this property is **wj-state-match**.

string

delay

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

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

number

displayMemberPath

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

継承元
ComboBox
string

formatItem

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

You can use this event to modify the HTML in the list items. For details, see the formatItem event.

継承元
ComboBox
イベント

handleWheel

ユーザーがマウスホイールで現在選択されている項目を変更できるかどうかを決定する値を取得または設定します。

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

継承元
ComboBox
boolean

headerPath

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

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

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

継承元
ComboBox
string

hostElement

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

継承元
Control
HTMLElement

inputElement

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

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

継承元
DropDown
HTMLInputElement

inputType

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

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

継承元
DropDown
string

isAnimated

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

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

継承元
DropDown
boolean

isContentHtml

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

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

継承元
ComboBox
boolean

isDisabled

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

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

継承元
Control
boolean

isDroppedDown

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

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

継承元
DropDown
boolean

isEditable

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

このプロパティのデフォルト値は、ComboBoxコントロールの場合false、AutoCompleteコントロールおよびInputTimeコントロールの場合はtrueです。

継承元
ComboBox
boolean

isReadOnly

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

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

継承元
DropDown
boolean

isRequired

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

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

継承元
DropDown
boolean

isTouching

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

継承元
Control
boolean

isUpdating

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

継承元
Control
boolean

itemFormatter

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

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

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

継承元
ComboBox
IItemFormatter

itemsSource

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

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

The ComboBox selection is determined by the current item in its collectionView. By default, this is the first item in the collection. You may change this behavior by setting the currentItem property of the collectionView to null.

継承元
ComboBox
any

itemsSourceFunction

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

The function takes three parameters:

  • the query string typed by the user
  • the maximum number of items to return
  • the callback function to call when the results become available

For example:

```typescript autoComplete.itemsSourceFunction: (query: string, max: number, callback: Function) => {

// query the server httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', { data: { $format: 'json', $select: 'ProductID,ProductName', $filter: 'indexof(ProductName, \'' + query + '\') gt -1' }, success: (xhr: XMLHttpRequest) => {

// return results to AutoComplete control let response = JSON.parse(xhr.response); callback(response.d ? response.d.results : response.value); } }); } ```

IGetItems

listBox

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

継承元
ComboBox
ListBox

maxDropDownHeight

ドロップダウンリストの最大の高さ(ピクセル単位)を取得または設定します。

このプロパティのデフォルト値は**200**ピクセルです。

継承元
ComboBox
number

maxDropDownWidth

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

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

このプロパティのデフォルト値は**null**です。これは、ドロップダウンに最大の幅制限がないことを意味します。

継承元
ComboBox
number

maxItems

Gets or sets the maximum number of items to display in the drop-down list.

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

number

minLength

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

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

number

placeholder

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

継承元
DropDown
string

rightToLeft

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

継承元
Control
boolean

searchMemberPath

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

By default, the AutoComplete control searches for matches against the property specified by the displayMemberPath property. The searchMemberPath property allows you to search using additional properties.

For example, the code below would cause the control to display the company name and search by company name, symbol, and country:

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

string

selectedIndex

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

継承元
ComboBox
number

selectedItem

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

継承元
ComboBox
any

selectedValue

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

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

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

継承元
ComboBox
any

selectedValuePath

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

継承元
ComboBox
string

showDropDownButton

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

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

継承元
DropDown
boolean

showGroups

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

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

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

継承元
ComboBox
boolean

tabOrder

Gets or sets a value of the **tabindex** attribute associated with the control.

**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.

Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.

継承元
Control
number

text

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

継承元
DropDown
string

trimText

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

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

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

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

継承元
ComboBox
boolean

virtualizationThreshold

ドロップダウン ListBoxで仮想化を有効にするために必要な最小行数、最小列数、 またはその両方を取得または設定します。

このプロパティのデフォルト値は非常に大きい数値であり、仮想化が無効になっていることを意味します。 仮想化を有効にするには、値を0または正の数に設定します。

For more detals, please see the virtializationThreshold property.

継承元
ComboBox
number

メソッド

addEventListener

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

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

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

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

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

passive イベントリスナーの詳細については、「&lt;a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners"&gt;Improving scrolling performance with passive listeners&lt;/a&gt;」を参考してください。

パラメーター
  • target: EventTarget

    Target element for the event.

  • type: string

    String that specifies the event.

  • fn: any

    Function to execute when the event occurs.

  • capture: boolean Optional

    Whether the listener should be handled by the control before it is handled by the target element.

  • passive: boolean Optional

    Indicates that the handler will never call preventDefault().

継承元
Control
戻り値
void

applyTemplate

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

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

このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。

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

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

パラメーター
  • classNames: string

    Names of classes to add to the control's host element.

  • template: string

    An HTML string that defines the control template.

  • parts: Object

    A dictionary of part variables and their names.

  • namePart: string Optional

    Name of the part to be named after the host element. This determines how the control submits data when used in forms.

継承元
Control
戻り値
HTMLElement

beginUpdate

beginUpdate(): void

次に endUpdate が呼び出されるまで通知を中断します。

継承元
Control
戻り値
void

containsFocus

containsFocus(): boolean

このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。

継承元
Control
戻り値
boolean

deferUpdate

deferUpdate(fn: Function): void

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

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

パラメーター
継承元
Control
戻り値
void

dispose

dispose(): void

ホスト要素との関連付けを解除することによってコントロールを破棄します。

dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。

コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。

継承元
Control
戻り値
void

Static disposeAll

disposeAll(e?: HTMLElement): void

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

パラメーター
継承元
Control
戻り値
void

endUpdate

endUpdate(): void

beginUpdate の呼び出しによって中断された通知を再開します。

継承元
Control
戻り値
void

focus

focus(): void

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

継承元
Control
戻り値
void

Static getControl

getControl(element: any): Control

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

パラメーター
  • element: any

    The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').

継承元
Control
戻り値
Control

getDisplayText

getDisplayText(index?: number, trimText?: this): string

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

パラメーター
  • index: number Optional

    The index of the item to retrieve the text for.

  • trimText: this Optional

    Optionally override the value of the trimText property.

継承元
ComboBox
戻り値
string

getTemplate

getTemplate(): string

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

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

継承元
Control
戻り値
string

indexOf

indexOf(search: string, fullMatch: boolean): number

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

パラメーター
  • search: string

    String to search for.

  • fullMatch: boolean

    Whether to look for a full match or just the start of the string.

継承元
ComboBox
戻り値
number

initialize

initialize(options: any): void

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

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

例:

```typescript 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

    Object that contains the initialization data.

継承元
Control
戻り値
void

invalidate

invalidate(fullUpdate?: boolean): void

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

パラメーター
  • fullUpdate: boolean Optional

    Whether to update the control layout as well as the content.

継承元
Control
戻り値
void

Static invalidateAll

invalidateAll(e?: HTMLElement): void

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

このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。

これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。

パラメーター
  • e: HTMLElement Optional

    Container element. If set to null, all Wijmo controls on the page will be invalidated.

継承元
Control
戻り値
void

onGotFocus

onGotFocus(e?: EventArgs): void

gotFocus イベントを発生させます。

パラメーター
継承元
Control
戻り値
void

onInvalidInput

onInvalidInput(e: CancelEventArgs): void

invalidInput イベントを発生させます。

イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。

パラメーター
継承元
Control
戻り値
void

onIsDroppedDownChanged

onIsDroppedDownChanged(e?: EventArgs): void

isDroppedDownChangedイベントを発生させます。

パラメーター
継承元
DropDown
戻り値
void

onIsDroppedDownChanging

onIsDroppedDownChanging(e: CancelEventArgs): boolean

isDroppedDownChangingイベントを発生させます。

パラメーター
継承元
DropDown
戻り値
boolean

onItemsSourceChanged

onItemsSourceChanged(e?: EventArgs): void

itemsSourceChanged イベントを発生させます。

パラメーター
継承元
ComboBox
戻り値
void

onLostFocus

onLostFocus(e?: EventArgs): void

lostFocus イベントを発生させます。

パラメーター
継承元
Control
戻り値
void

onRefreshed

onRefreshed(e?: EventArgs): void

refreshedイベントを発生させます。

パラメーター
継承元
Control
戻り値
void

onRefreshing

onRefreshing(e?: EventArgs): void

refreshingイベントを発生させます。

パラメーター
継承元
Control
戻り値
void

onSelectedIndexChanged

onSelectedIndexChanged(e?: EventArgs): void

selectedIndexChangedイベントを発生させます。

パラメーター
継承元
ComboBox
戻り値
void

onTextChanged

onTextChanged(e?: EventArgs): void

textChangedイベントを発生させます。

パラメーター
継承元
DropDown
戻り値
void

refresh

refresh(fullUpdate?: boolean): void

コントロールを更新します。

パラメーター
  • fullUpdate: boolean Optional

    Whether to update the control layout as well as the content.

継承元
Control
戻り値
void

Static refreshAll

refreshAll(e?: HTMLElement): void

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

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

パラメーター
  • e: HTMLElement Optional

    Container element. If set to null, all Wijmo controls on the page will be invalidated.

継承元
Control
戻り値
void

removeEventListener

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

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

パラメーター
  • target: EventTarget Optional

    Target element for the event. If null, removes listeners attached to all targets.

  • type: string Optional

    String that specifies the event. If null, removes listeners attached to all events.

  • fn: any Optional

    Handler to remove. If null, removes all handlers.

  • capture: boolean Optional

    Whether the listener is capturing. If null, removes capturing and non-capturing listeners.

継承元
Control
戻り値
number

selectAll

selectAll(): void

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

継承元
DropDown
戻り値
void

イベント

gotFocus

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

継承元
Control
引数
EventArgs

invalidInput

無効な入力値が検出された場合に発生します。

ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。

イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。

イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。

継承元
Control
引数
CancelEventArgs

isDroppedDownChanged

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

継承元
DropDown
引数
EventArgs

isDroppedDownChanging

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

継承元
DropDown
引数
CancelEventArgs

itemsSourceChanged

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

継承元
ComboBox
引数
EventArgs

lostFocus

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

継承元
Control
引数
EventArgs

refreshed

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

継承元
Control
引数
EventArgs

refreshing

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

継承元
Control
引数
EventArgs

selectedIndexChanged

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

継承元
ComboBox
引数
EventArgs

textChanged

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

継承元
DropDown
引数
EventArgs