Framework7 - Saisie semi-automatique
La description
La saisie semi-automatique est un composant convivial et tactile de Framework7, qui peut être sous forme de liste déroulante ou de manière autonome. Vous pouvez créer et initialiser une instance de saisie semi-automatique à l'aide de la méthode JavaScript -
myApp.autocomplete(parameters)Où les paramètres sont des objets obligatoires utilisés pour initialiser l'instance de saisie semi-automatique.
Paramètres de saisie semi-automatique
Le tableau suivant répertorie les paramètres de saisie semi-automatique disponibles dans Framework7 -
| S. Non | Paramètres et description | Type | Défaut |
|---|---|---|---|
| 1 | openIn Il définit comment ouvrir une saisie semi-automatique qui pourrait être utilisée comme liste déroulante, popup ou page. |
chaîne | page |
| 2 | source Il utilise une instance de saisie semi-automatique, une requête de recherche et une fonction de rendu pour transmettre les éléments correspondants avec un tableau. |
fonction (saisie semi-automatique, requête, rendu) | - |
| 3 | valueProperty Il spécifie la valeur d'élément de la clé de l'objet élément correspondant. |
chaîne | id |
| 4 | limit Il affiche le nombre limité d'éléments en saisie semi-automatique par requête. |
nombre | - |
| 5 | preloader Preloader peut être utilisé pour spécifier la mise en page de saisie semi-automatique en le définissant sur true. |
booléen | faux |
| 6 | preloaderColor Il spécifie la couleur du préchargeur. Par défaut, la couleur est "noir". |
chaîne | - |
| sept | value Définit le tableau avec les valeurs sélectionnées par défaut. |
tableau | - |
| 8 | textProperty Il spécifie la valeur d'élément de la clé d'objet d'élément correspondant, qui peut être utilisée comme titre des options affichées. |
chaîne | texte |
Paramètres de saisie semi-automatique autonomes
Le tableau suivant répertorie les paramètres de saisie semi-automatique autonomes disponibles dans Framework7 -
| S. Non | Paramètres et description | Type | Défaut |
|---|---|---|---|
| 1 | opener C'est un paramètre de chaîne ou d'élément HTML qui ouvrira la page de saisie semi-automatique autonome. |
chaîne ou HTMLElement | - |
| 2 | popupCloseText Il est utilisé pour fermer la fenêtre contextuelle de saisie semi-automatique. |
chaîne | 'Fermer' |
| 3 | backText Il fournit le lien de retour lorsque la saisie semi-automatique est ouverte en tant que page. |
chaîne | 'Retour' |
| 4 | pageTitle Il spécifie le titre de la page de saisie semi-automatique. |
chaîne | - |
| 5 | searchbarPlaceholderText Il spécifie le texte de l'espace réservé de la barre de recherche. |
chaîne | 'Chercher' |
| 6 | searchbarCancelText Il définit le texte du bouton d'annulation de la barre de recherche. |
chaîne | 'Annuler' |
| sept | notFoundText Il affiche le texte lorsqu'il n'y a pas d'élément correspondant trouvé. |
chaîne | 'Rien n'a été trouvé' |
| 8 | multiple Il permet de sélectionner plusieurs sélections en le définissant sur true. |
booléen | faux |
| 9 | navbarTheme Il spécifie le thème de couleur pour la barre de navigation. |
chaîne | - |
| dix | backOnSelect Lorsque l'utilisateur choisit une valeur, la saisie semi-automatique sera fermée en la définissant sur true. |
booléen | faux |
| 11 | formTheme Il spécifie le thème de couleur du formulaire. |
chaîne | - |
Paramètres de saisie semi-automatique de la liste déroulante
Le tableau suivant répertorie les paramètres de saisie semi-automatique de la liste déroulante disponibles dans Framework7 -
| S. Non | Paramètres et description | Type | Défaut |
|---|---|---|---|
| 1 | input Il s'agit d'une chaîne ou d'un élément HTML utilisé pour la saisie de texte. |
chaîne ou HTMLElement | - |
| 2 | dropdownPlaceholderText Il spécifie le texte de l'espace réservé de la liste déroulante. |
chaîne | - |
| 3 | updateInputValueOnSelect Vous pouvez mettre à jour la valeur d'entrée lors de la sélection en la définissant sur true. |
booléen | vrai |
| 4 | expandInput Vous pouvez développer la saisie de texte dans la vue Liste pour rendre le plein écran visible pendant la liste déroulante en définissant l'entrée d'élément sur true. |
booléen | faux |
Fonctions de rappel automatique
Le tableau ci-dessous répertorie les paramètres de saisie semi-automatique de la liste déroulante disponibles dans Framework7 -
| S. Non | Paramètres et description | Type | Défaut |
|---|---|---|---|
| 1 | onChange Chaque fois que la valeur de saisie semi-automatique est modifiée, cette fonction de rappel sera exécutée. |
fonction (saisie semi-automatique, valeur) | - |
| 2 | onOpen Chaque fois que la saisie semi-automatique est ouverte, cette fonction de rappel sera exécutée. |
fonction (saisie semi-automatique) | - |
| 3 | onClose Chaque fois que la saisie semi-automatique est fermée, cette fonction de rappel sera exécutée. |
fonction (saisie semi-automatique) | - |
Modèles de saisie semi-automatique
Le tableau suivant répertorie les paramètres de saisie semi-automatique de la liste déroulante disponibles dans Framework7 -
| S. Non | Paramètres et description | Type | Défaut |
|---|---|---|---|
| 1 | navbarTemplate Il s'agit d'un modèle de barre de navigation à saisie semi-automatique autonome. |
chaîne | - |
| 2 | itemTemplate Il s'agit d'un élément de formulaire template7 autonome. |
chaîne | - |
| 3 | dropdownTemplate C'est un modèle de liste déroulante template7. |
chaîne | - |
| 4 | dropdownItemTemplate Il s'agit d'un élément de liste déroulante template7. |
chaîne | - |
| 5 | dropdownPlaceholderTemplate Il s'agit de l'élément d'espace réservé de la liste déroulante template7. |
chaîne | - |
Modèles par défaut
Voici les extraits de code de modèle par défaut pour les paramètres de modèles définis ci-dessus -
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>Méthodes de saisie semi-automatique
Le tableau suivant spécifie les méthodes de saisie semi-automatique disponibles dans Framework7 -
| S. Non | Méthodes et description |
|---|---|
| 1 | myAutocomplete.params Définit les paramètres d'initialisation qui sont passés avec l'objet. |
| 2 | myAutocomplete.value Il définit le tableau avec les valeurs sélectionnées. |
| 3 | myAutocomplete.opened Il ouvre la saisie semi-automatique si elle est définie sur true. |
| 4 | myAutocomplete.dropdown Il spécifie une instance de liste déroulante de saisie semi-automatique. |
| 5 | myAutocomplete.popup Il spécifie une instance de popup de saisie semi-automatique. |
| 6 | myAutocomplete.page Il spécifie une instance de la page de saisie semi-automatique. |
| sept | myAutocomplete.pageData Il définit les données de la page de saisie semi-automatique. |
| 8 | myAutocomplete.searchbar Il définit l'instance de la barre de recherche de saisie semi-automatique. |
Propriétés de saisie semi-automatique
Le tableau suivant spécifie les méthodes de saisie semi-automatique disponibles dans Framework7 -
| S. Non | Propriétés et description |
|---|---|
| 1 | myAutocomplete.open() Il ouvre la saisie semi-automatique, qui peut être utilisée comme liste déroulante, popup ou page. |
| 2 | myAutocomplete.close() Il ferme la saisie semi-automatique. |
| 3 | myAutocomplete.showPreloader() Il montre le préchargeur de saisie semi-automatique. |
| 4 | myAutocomplete.hidePreloader() Il masque le préchargeur de saisie semi-automatique. |
| 5 | myAutocomplete.destroy() Il ruine l'instance de préchargement de saisie semi-automatique et supprime tous les événements. |
Exemple
L'exemple suivant montre l'utilisation de paramètres de saisie semi-automatique masqués dans le 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>Production
Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -
Enregistrez le code HTML ci-dessus sous autocomplete.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/autocomplete.html et la sortie s'affiche comme indiqué ci-dessous.
L'exemple fournit la saisie semi-automatique des valeurs dans une liste déroulante simple, une liste déroulante avec toutes les valeurs, une liste déroulante avec un espace réservé, une saisie semi-automatique autonome, etc.