[]
AutoComplete クラスの新しいインスタンスを初期化します。
このコントロールをホストするDOM要素またはホスト要素のセレクタ('#theCtrl'など)。
コントロールの初期化データを含むJavaScriptオブジェクト。
コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はtrueです。
項目ソースとして使用されるICollectionView オブジェクトを取得します。
検索語と一致するすべての部分をコンテンツで強調表示するために使用する CSSクラスの名前を取得または設定します。
キーストロークが発生してから検索が実行されるまでの遅延(ミリ秒単位)を取得または設定します。
このプロパティのデフォルト値は500ミリ秒です。
項目の視覚表示として使用するプロパティの名前を取得または設定します。
isDroppedDown プロパティがtrueに設定されているときに表示されるドロップダウン要素を取得します。
コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。
このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。 ドロップダウン要素は、 コントロール自体の子としてではなく、ドキュメントボディの子として表示され、 親コントロールに基づいてCSSセレクタを使用することができないためです。
コントロールの入力要素に表示される値を取得するために使用するプロパティ名を取得または設定します。
このプロパティのデフォルト値はnullです。この場合、コントロールは、 ドロップダウンリストの選択項目と同じ内容を入力要素に表示します。
入力要素に表示される値をドロップダウンリストに表示される値とは切り離す場合は、 このプロパティを使用します。たとえば、入力要素には項目名を表示し、 ドロップダウンリストには追加情報を表示することができます。
コントロールによってホストされているHTML入力要素を取得します。
このプロパティは、入力要素の属性をカスタマイズする場合に使用します。
コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。
このプロパティのデフォルト値はtextです。
ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はfalse です。
ドロップダウンリストに項目をプレーンテキストとして表示するか、HTMLとして表示するかを 示す値を取得または設定します。
このプロパティのデフォルト値はfalse です。
ドロップダウンが現在表示されているかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はfalse です。
入力要素の内容をitemsSource コレクション内の項目に 制限するかどうかを決定する値を取得または設定します。
このプロパティは、デフォルトで ComboBox コントロールに対してfalseに設定され、AutoComplete および InputTime コントロールに対してtrueに設定されます。
ユーザーがマウスとキーボードを使用してコントロール値を変更できるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はfalse です。
コントロール値をnull以外の値に設定する必要があるか、 それとも(コントロールのコンテンツを削除することで)nullに設定できるかを 決定する値を取得または設定します。
このプロパティは、{@ link ComboBox}、{@ link InputDate}、{@ link InputTime}、{@ link InputDateTime}、 およびInputColor などのほとんどのコントロールに対してデフォルトでtrueに設定されます。 AutoComplete コントロールに対してデフォルトでfalseに設定されます。
ドロップダウンリストに表示される値のカスタマイズに使用される関数を取得または設定します。 この関数は、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; }
選択リストの項目を含む配列またはICollectionView オブジェクトを取得または設定します。
このプロパティを配列に設定すると、ComboBox は ComboBox.collectionView プロパティによって公開される内部 ICollectionView オブジェクトを作成します。
ComboBox の選択は、その ComboBox.collectionView 内の現在の項目によって決定されます。デフォルトでは、コレクションの最初の項目に設定されます。 この動作を変更するには、ComboBox.collectionView の {@link wijmo.collections.CollectionView.currentItem} プロパティをnullに設定します。
ユーザーの入力に従ってリスト項目を動的に提供する関数を取得または設定します。
この関数は以下の3つのパラメーターをとります。
例:
autoComplete.itemsSourceFunction = function (query, max, callback) { // サーバーから結果を取得します var params = { query: query, max: max }; $.getJSON('companycatalog.ashx', params, function (response) { // コントロールに結果を返します callback(response); }); };
ドロップダウンに示されているListBox コントロールを取得します。
ドロップダウンリストの最大の高さを取得または設定します。
ドロップダウンリストの最大の幅を取得または設定します。
ドロップダウンリストの幅は、コントロール自体の幅によっても制限されます (その値はドロップダウンの最小幅を表します)。
ドロップダウンリストに表示する項目の最大数を取得または設定します。
このプロパティのデフォルト値は6です。
オートコンプリート候補を検索するために必要な入力の最小長さを取得または設定します。
このプロパティのデフォルト値は2です。
コントロールが空のときにヒントとして表示される文字列を取得または設定します。
項目の検索時に使用するプロパティのカンマ区切りリストを含む文字列を取得または設定します。
デフォルトでは、AutoComplete コントロールは、displayMemberPath プロパティで指定された プロパティと比較して一致を検索します。searchMemberPath プロパティを使用すると、 追加のプロパティを使用して検索を行うことができます。
たとえば、以下のコードは、会社名を表示し、 会社名、シンボル、および国に基づいて検索を行います。
import { AutoComplete } from '@grapecity/wijmo.input';
var ac = new AutoComplete('#autoComplete', {
itemsSource: companies,
displayMemberPath: 'name',
searchMemberPath: 'symbol,country'
});
ドロップダウンリストで現在選択されている項目のインデックスを取得または設定します。
ドロップダウンリストで現在選択されている項目を取得または設定します。
selectedValuePath を使用して取得されたselectedItem の値を取得または設定します。
selectedValuePath プロパティが設定されていない場合は、コントロールの selectedItem プロパティの値を取得または設定します。 itemsSource プロパティが設定されていない場合は、 コントロールの text プロパティの値を取得または設定します。
selectedValue をselectedItem から取得するために使用するプロパティの名前を 取得または設定します。
コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はtrueです。
データグループを区切るためにドロップダウン ListBox に グループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。
データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのICollectionView.groupDescriptions プロパティを変更します。
このプロパティのデフォルト値はfalseです。
コントロールに表示されるテキストを取得または設定します。
先頭および末尾のスペースを削除してコントロールの入力要素の値を トリミングするかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は trueです。
ドロップダウンリストの項目の前後のスペースを確認するには、 次のようなCSSルールを適用する必要があります。
.wj-listbox-item { white-space: pre; }
DropDown コントロールのインスタンス化に使用されるテンプレートを取得または設定します。
指定したインデックスにある項目に対して表示される文字列を(プレーンテキストとして)取得します。
テキストを取得する項目のインデックス。
指定した文字列と一致する最初の項目のインデックスを取得します。
検索するテキスト。
完全一致で検索するか、前方一致で検索するか。
The index of the item, or -1 if not found.
itemsSourceChanged イベントを発生させます。
selectedIndexChanged イベントを発生させます。
textChanged イベントを発生させます。
コントロールにフォーカスを設定してそのすべての内容を選択します。
ドロップダウンリストの項目が作成されると発生するイベント。
このイベントを使用して、リスト項目のHTMLを変更できます。 詳細については、ListBox.formatItem イベントを参照してください。
ドロップダウンが表示または非表示になった後に発生します。
ドロップダウンが表示または非表示になる前に発生します。
itemsSource プロパティの値が変化すると発生します。
selectedIndex プロパティの値が変更されたときに発生します。
text プロパティの値が変更されたときに発生します。
AutoComplete コントロールは、ユーザー入力時に入力文字列に従って呼び出し元で項目リストをカスタマイズできる入力コントロールです。
このコントロールはComboBox に似ていますが、 項目ソースが静的なリストではなく関数(itemsSourceFunction )である点が異なります。たとえば、ユーザーの入力に従ってリモートデータベースの項目を検索できます。 次の例では、AutoComplete コントロールを作成し、'countries'配列を使用してリストの内容を設定します。 ユーザーが文字を入力すると自動的に国が検索され、候補が絞り込まれて現在の入力と一致するものだけになります。
Example