Framework7-オートコンプリート
説明
オートコンプリートは、Framework7のモバイルフレンドリーでタッチに最適化されたコンポーネントであり、ドロップダウンとして、またはスタンドアロンで使用できます。 JavaScriptメソッドを使用して、オートコンプリートインスタンスを作成および初期化できます-
_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
itemTemplate
dropdownTemplate
dropdownItemTemplate
dropdownPlaceholderTemplate
オートコンプリートメソッド
次の表は、Framework7で利用可能なオートコンプリートメソッドを示しています-
S.No
方法と説明
1
オブジェクトとともに渡される初期化パラメーターを定義します。
2
選択した値で配列を定義します。
3
trueに設定されている場合、オートコンプリートが開きます。
4
Autocompleteドロップダウンのインスタンスを指定します。
5
Autocompleteポップアップのインスタンスを指定します。
6
オートコンプリートページのインスタンスを指定します。
7
オートコンプリートページデータを定義します。
8
Autocomplete検索バーインスタンスを定義します。
オートコンプリートプロパティ
次の表は、Framework7で利用可能なオートコンプリートメソッドを示しています-
| S.No
|
Properties & Description
|
| 1
|
myAutocomplete.open()
ドロップダウン、ポップアップ、またはページとして使用できるオートコンプリートを開きます。
|
| 2
|
myAutocomplete.close()
オートコンプリートを閉じます。
|
| 3
|
myAutocomplete.showPreloader()
オートコンプリートプリローダーを示しています。
|
| 4
|
myAutocomplete.hidePreloader()
Autocompleteプリローダーを非表示にします。
|
| 5
|
myAutocomplete.destroy()
Autocompleteプリローダーインスタンスを破壊し、すべてのイベントを削除します。
|
例
次の例は、Framework7に隠れているオートコンプリートパラメーターの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name = "apple-mobile-web-app-capable" content = "yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>Autocomplete</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main');
//Countries data array
var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');
//Simple Dropdown
var autocompleteDropdownSimple = myApp.autocomplete ({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
//You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
//Display the items by passing array with result items
render(results);
}
});
//Dropdown with input expand
var autocompleteDropdownExpand = myApp.autocomplete ({
input: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, //expandInput used as item-input in List View will be expanded to full screen wide
//during dropdown
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
//Find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
//Display the items by passing array with result items
render(results);
}
});
//Dropdown with all values
var autocompleteDropdownAll = myApp.autocomplete ({
input: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
//You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
//Display the items by passing array with result items
render(results);
}
});
//Dropdown with placeholder
var autocompleteDropdownPlaceholder = myApp.autocomplete ({
input: '#autocomplete-dropdown-placeholder',
openIn: 'dropdown',
dropdownPlaceholderText: 'Type as "India"',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
//You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
//Display the items by passing array with result items
render(results);
}
});
//Simple Standalone
var autocompleteStandaloneSimple = myApp.autocomplete ({
openIn: 'page',//open in page
opener: $$('#autocomplete-standalone'),//link that opens autocomplete
backOnSelect: true,//go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
//You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
//Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
//Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]);
//You can add item value to input value
$$('#autocomplete-standalone').find('input').val(value[0]);
}
});
//Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup',//Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'),//It will open standalone autocomplete popup
backOnSelect: true,//After selecting item, then go back to page
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
//You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
//Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
//Here add the item text value to item-after
$$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
//You can add item value to input value
$$('#autocomplete-standalone-popup').find('input').val(value[0]);
}
});
//Multiple Standalone
var autocompleteStandaloneMultiple = myApp.autocomplete ({
openIn: 'page',//Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-multiple'),//link that opens autocomplete
multiple: true,//Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
//You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
//Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
//Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
//You can add item value to input value
$$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>
出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを autocompletel ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/autocompletelとして開くと、出力は以下のように表示されます。
- この例は、単純なドロップダウン、すべての値を含むドロップダウン、プレースホルダーを含むドロップダウン、スタンドアロンのオートコンプリートなどで値のオートコンプリートを提供します。
