JqueryUI - Saisie semi-automatique

La saisie semi-automatique est un mécanisme fréquemment utilisé dans les sites Web modernes pour fournir à l'utilisateur une liste de suggestions pour le début du mot, qu'il / elle a tapé dans une zone de texte. L'utilisateur peut alors sélectionner un élément de la liste, qui sera affiché dans le champ de saisie. Cette fonction évite à l'utilisateur d'avoir à saisir un mot entier ou un ensemble de mots.

JQueryUI fournit un widget de saisie semi-automatique - un contrôle qui agit un peu comme un menu déroulant <select>, mais filtre les choix pour ne présenter que ceux qui correspondent à ce que l'utilisateur tape dans un contrôle. jQueryUI fournit leautocomplete() pour créer une liste de suggestions sous le champ de saisie et ajouter de nouvelles classes CSS aux éléments concernés pour leur donner le style approprié.

Tout champ pouvant recevoir une entrée peut être converti en une saisie semi-automatique, à savoir des éléments <input>, des éléments <textarea> et des éléments avec l' attribut contenteditable .

Syntaxe

le autocomplete() La méthode peut être utilisée sous deux formes -

$ (selector, context) .autocomplete (options), méthode
$ (selector, context) .autocomplete ("action", params), méthode

$ (selector, context) .autocomplete (options), méthode

La méthode autocomplete (options) déclare qu'un élément HTML <input> doit être géré comme un champ de saisie qui sera affiché au-dessus d'une liste de suggestions. Le paramètre options est un objet qui spécifie le comportement de la liste de suggestions lorsque l'utilisateur tape dans le champ de saisie.

Syntaxe

$(selector, context).autocomplete (options);

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

$(selector, context).autocomplete({option1: value1, option2: value2..... });

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -


$( ".selector" ).autocomplete({ appendTo: "#identifier" });
$( ".selector" ).autocomplete({ autoFocus: true });
$( ".selector" ).autocomplete({ delay: 500 });
$( ".selector" ).autocomplete({ disabled: true });
$( ".selector" ).autocomplete({ minLength: 0 });
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

Sr.No.	Option et description
1	ajouter à Cette option est utilisée pour ajouter un élément au menu. Par défaut, sa valeur estnull. Option - appendTo Cette option est utilisée pour ajouter un élément au menu. Par défaut, sa valeur estnull. Lorsque la valeur est nulle, les parents du champ de saisie seront vérifiés pour une classe de ui-front . Si un élément avec la classe ui-front est trouvé, le menu sera ajouté à cet élément. Syntax `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	mise au point automatique Cette option lorsqu'elle est définie sur true , le premier élément du menu sera automatiquement mis au point lorsque le menu est affiché. Par défaut, sa valeur estfalse. Option - autoFocus Cette option lorsqu'elle est définie sur true , le premier élément du menu sera automatiquement mis au point lorsque le menu est affiché. Par défaut, sa valeur estfalse. Syntax `$( ".selector" ).autocomplete({ autoFocus: true });`
3	retard Cette option est un entier représentant le nombre de millisecondes à attendre avant d'essayer d'obtenir les valeurs correspondantes (comme spécifié par l' option source ). Cela peut aider à réduire le battement lorsque des données non locales sont obtenues en donnant à l'utilisateur le temps de saisir plus de caractères avant de lancer la recherche. Par défaut, sa valeur est300. Option - delay Cette option est un entier représentant le nombre de millisecondes à attendre avant d'essayer d'obtenir les valeurs correspondantes (comme spécifié par l' option source ). Cela peut aider à réduire le battement lorsque des données non locales sont obtenues en donnant à l'utilisateur le temps de saisir plus de caractères avant de lancer la recherche. Par défaut, sa valeur est300. Syntax `$( ".selector" ).autocomplete({ delay: 500 });`
4	désactivée Cette option si elle est spécifiée et vraie , le widget de saisie semi-automatique est initialement désactivé. Par défaut, sa valeur estfalse. Option - disabled Cette option si elle est spécifiée et vraie , le widget de saisie semi-automatique est initialement désactivé. Par défaut, sa valeur estfalse. Syntax `$( ".selector" ).autocomplete({ disabled: true });`
5	Longueur minimale Le nombre de caractères à saisir avant d'essayer d'obtenir les valeurs correspondantes (comme spécifié par l'option source). Cela peut empêcher un ensemble de valeurs trop grand d'être présenté lorsque quelques caractères ne suffisent pas pour ramener l'ensemble à un niveau raisonnable. Par défaut, sa valeur est1. Option - minLength Le nombre de caractères à saisir avant d'essayer d'obtenir les valeurs correspondantes (comme spécifié par l'option source). Cela peut empêcher un ensemble de valeurs trop grand d'être présenté lorsque quelques caractères ne suffisent pas pour ramener l'ensemble à un niveau raisonnable. Par défaut, sa valeur est1. Syntax `$( ".selector" ).autocomplete({ minLength: 0 });`
6	position Cette option identifie la position du menu de suggestions par rapport à l'élément d'entrée associé. L' des valeurs par défaut d'option à l'élément d'entrée, mais vous pouvez spécifier un autre élément à la position contre. Par défaut, sa valeur est{ my: "left top", at: "left bottom", collision: "none" }. Option - position Cette option identifie la position du menu de suggestions par rapport à l'élément d'entrée associé. L' des valeurs par défaut d'option à l'élément d'entrée, mais vous pouvez spécifier un autre élément à la position contre. Par défaut, sa valeur est{ my: "left top", at: "left bottom", collision: "none" }. Syntax `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
sept	la source Cette option spécifie la manière dont les données qui correspondent aux données d'entrée sont obtenues. Une valeur doit être fournie ou le widget de saisie semi-automatique ne sera pas créé. Par défaut, sa valeur estnone; must be specified. Option - source Cette option spécifie la manière dont les données qui correspondent aux données d'entrée sont obtenues. Une valeur doit être fournie ou le widget de saisie semi-automatique ne sera pas créé. Cette valeur peut être: String représentant l'URL d'une ressource serveur qui renverra les données correspondantes, an array des données locales à partir desquelles la valeur sera mise en correspondance, ou a function qui sert de rappel général pour fournir les valeurs correspondantes. Syntax `$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });`

La section suivante vous montrera quelques exemples fonctionnels de fonctionnalité de widget de saisie semi-automatique.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité de widget de saisie semi-automatique, en ne transmettant aucun paramètre au autocomplete() méthode.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML autocompleteexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Utilisation de l'autofocus

L'exemple suivant montre l'utilisation de l'option autoFocus dans le widget de saisie semi-automatique de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML autocompleteexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Utilisation de minLength et delay

L'exemple suivant illustre l'utilisation de deux options minLength et delay dans le widget de saisie semi-automatique de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", "Ecommerce", "Jquery", "Groovy", "Java", "JavaScript", "Lua", "Perl", "Ruby", "Scala", "Swing", "XHTML" ]; $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

Utilisation de l'étiquette

L'exemple suivant montre l'utilisation de l'option label dans le widget de saisie semi-automatique de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

Utilisation d'une source externe

L'exemple suivant illustre l'utilisation d'un fichier externe pour source option dans le widget de saisie semi-automatique de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

Le fichier search.php est placé au même emplacement que le fichier ci-dessus (autocompleteexample.html). Le contenu de search.php est comme ci-dessous -

<?
$term = $_GET[ "term" ];
$companies = array( array( "label" => "JAVA", "value" => "1" ), array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ), array( "label" => "JAVASCRIPT", "value" => "3" ), array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ), array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ), array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ), array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ), array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ), array( "label" => "CLOUD COMPUTING", "value" => "9" ), array( "label" => "DATA MINING", "value" => "10" ), array( "label" => "DATA WAREHOUSE", "value" => "11" ), array( "label" => "E-COMMERCE", "value" => "12" ), array( "label" => "DBMS", "value" => "13" ), array( "label" => "HTTP", "value" => "14" ) ); $result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

Tapez deux mots de lettre pour par exemple: ja, sc, etc.

$ (selector, context) .autocomplete ("action", params), méthode

La méthode de saisie semi-automatique ("action", params) peut effectuer une action sur la liste des suggestions, comme afficher ou masquer. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "fermer" pour masquer la liste). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

$(selector, context).autocomplete ("action", params);;

Le tableau suivant répertorie les différentes actions pouvant être utilisées avec cette méthode -

Sr.No.	Action et description
1	Fermer Cette action masque la liste des suggestions dans le menu de saisie semi-automatique. Cette méthode n'accepte aucun argument. Action - close Cette action masque la liste des suggestions dans le menu de saisie semi-automatique. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).autocomplete("close");`
2	détruire Cette action supprime la fonctionnalité de saisie semi-automatique. Les listes de suggestions sont supprimées. Cette méthode n'accepte aucun argument. Action - destroy Cette action supprime la fonctionnalité de saisie semi-automatique. Les listes de suggestions sont supprimées. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).autocomplete("destroy");`
3	désactiver Cette action désactive le mécanisme de saisie semi-automatique. La liste des suggestions n'apparaît plus. Cette méthode n'accepte aucun argument. Action - disable Cette action désactive le mécanisme de saisie semi-automatique. La liste des suggestions n'apparaît plus. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).autocomplete("disable");`
4	activer Cette action réactive le mécanisme d'auto-complétion. La liste des suggestions sera à nouveau affichée. Cette méthode n'accepte aucun argument. Action - enable Cette action réactive le mécanisme d'auto-complétion. La liste des suggestions sera à nouveau affichée. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).autocomplete("enable");`
5	option (optionName) Cette action récupère la valeur du paramètre optionName spécifié . Cette option correspond à l'une de celles utilisées avec la saisie semi-automatique (options). Action - option( optionName ) Cette action récupère la valeur du paramètre optionName spécifié . Cette option correspond à l'une de celles utilisées avec la saisie semi-automatique (options). Syntax `var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );`
6	option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de saisie semi-automatique. Action - option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de saisie semi-automatique. Syntax `var options = $( ".selector" ).autocomplete( "option" );`
sept	option (optionName, valeur) Cette action définit la valeur de l'option de saisie semi - automatique associée au spécifié optionName . L'argument optionName est le nom de l'option à définir et value est la valeur à définir pour l'option. Action - option( optionName, value ) Cette action définit la valeur de l'option de saisie semi - automatique associée au spécifié optionName . L'argument optionName est le nom de l'option à définir et value est la valeur à définir pour l'option. Syntax `$( ".selector" ).autocomplete( "option", "disabled", true );`
8	option (options) Cette action définit une ou plusieurs options pour la saisie semi-automatique. L'argument options est une carte de paires option-valeur à définir. Action - option( options ) Cette action définit une ou plusieurs options pour la saisie semi-automatique. L'argument options est une carte de paires option-valeur à définir. Syntax `$( ".selector" ).autocomplete( "option", { disabled: true } );`
9	recherche ([valeur]) Cette action recherche la correspondance entre la valeur de chaîne et la source de données (spécifiée dans options.source ). Le nombre minimum de caractères (indiqué dans options.minLength ) doit être atteint en valeur, sinon la recherche n'est pas effectuée. Action - search( [value ] ) Cette action recherche la correspondance entre la valeur de chaîne et la source de données (spécifiée dans options.source ). Le nombre minimum de caractères (indiqué dans options.minLength ) doit être atteint en valeur, sinon la recherche n'est pas effectuée. Syntax `$( ".selector" ).autocomplete( "search", "" );`
dix	widget Récupérez l'élément DOM <ul> correspondant à la liste des suggestions. Il s'agit d'un objet de la classe jQuery qui permet un accès facile à la liste sans utiliser les sélecteurs jQuery. Action - widget Récupérez l'élément DOM <ul> correspondant à la liste des suggestions. Il s'agit d'un objet de la classe jQuery qui permet un accès facile à la liste sans utiliser les sélecteurs jQuery. Syntax `$( ".selector" ).autocomplete("widget");`

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation de la méthode option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({ source: availableTutorials }); $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML autocompleteexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Points d'extension

Le widget de saisie semi-automatique peut être étendu à mesure qu'il est construit avec la fabrique de widgets. Lors de l'extension des widgets, vous avez la possibilité de remplacer ou d'ajouter au comportement des méthodes existantes. Le tableau suivant répertorie les méthodes qui agissent comme des points d'extension avec la même stabilité d'API que les méthodes de plug-in répertoriées ci - dessus .

Sr.No.	Méthode et description
1	_renderItem (ul, élément) Cette méthode contrôle la création de chaque option dans le menu du widget. Cette méthode crée un nouvel élément <li>, l'ajoute au menu et le renvoie. _renderItem( ul, item ) Cette méthode contrôle la création de chaque option dans le menu du widget. Cette méthode crée un nouvel élément <li>, l'ajoute au menu et le renvoie. Où - <ul> est l'élément qui doit être ajouté à l'élément <li> nouvellement créé. item peut être une étiquette (String) , la chaîne à afficher pour l'élément ou une valeur (String) , la valeur à insérer dans l'entrée lorsque l'élément est sélectionné.
2	_renderMenu (ul, éléments) Cette méthode contrôle la construction du menu du widget. _renderMenu( ul, items ) Cette méthode contrôle la construction du menu du widget. Où - <ul>est un tableau d'éléments qui correspondent au terme saisi par l'utilisateur. Chaque élément est un objet avec des propriétés d' étiquette et de valeur .
3	_resizeMenu () Cette méthode contrôle le dimensionnement du menu avant son affichage. L'élément de menu est disponible dans this.menu.element . Cette méthode n'accepte aucun argument. _resizeMenu() Cette méthode contrôle le dimensionnement du menu avant son affichage. L'élément de menu est disponible dans this.menu.element . Cette méthode n'accepte aucun argument.

Gestion des événements sur les éléments de saisie semi-automatique

En plus de la méthode de saisie semi-automatique (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui sont déclenchées pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -

Sr.No.	Méthode d'événement et description
1	changer (événement, ui) Cet événement est déclenché lorsque la valeur de l'élément <input> est modifiée en fonction d'une sélection. Lorsqu'il est déclenché, cet événement survient toujours après le déclenchement de l'événement de fermeture . Event - change(event, ui) Cet événement est déclenché lorsque la valeur de l'élément <input> est modifiée en fonction d'une sélection. Lorsqu'il est déclenché, cet événement survient toujours après le déclenchement de l'événement de fermeture . Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - item- L'élément sélectionné dans le menu, le cas échéant. Sinon, la propriété est nulle. Syntax `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	close (événement, interface utilisateur) Cet événement est déclenché chaque fois que le menu de saisie semi-automatique se ferme. Event - close(event, ui) Cet événement est déclenché chaque fois que le menu de saisie semi-automatique se ferme. Où event est de type Event et ui est de type Object . Syntax `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	create (événement, interface utilisateur) Cet événement est déclenché lors de la création de la saisie semi-automatique. Event - create(event, ui) Cet événement est déclenché lors de la création de la saisie semi-automatique. Où l' événement est de type Event et ui est de type Object . Les valeurs possibles de ui sont - item- L'élément sélectionné dans le menu, le cas échéant. Sinon, la propriété est nulle. Syntax `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	focus (événement, interface utilisateur) Cet événement est déclenché chaque fois que l'un des choix de menu reçoit le focus. Sauf annulation (par exemple, en retournant false), la valeur focalisée est définie dans l'élément <input>. Event - focus(event, ui) Cet événement est déclenché chaque fois que l'un des choix de menu reçoit le focus. Sauf annulation (par exemple, en retournant false), la valeur focalisée est définie dans l'élément <input>. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - item - L'élément ciblé. Syntax `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	open (événement, interface utilisateur) Cet événement est déclenché une fois que les données ont été préparées et que le menu est sur le point de s'ouvrir. Event - open(event, ui) Cet événement est déclenché une fois que les données ont été préparées et que le menu est sur le point de s'ouvrir. Où event est de type Event et ui est de type Object . Syntax `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	réponse (événement, interface utilisateur) Cet événement est déclenché une fois la recherche terminée, avant que le menu ne s'affiche. Cet événement est toujours déclenché lorsqu'une recherche se termine, même si le menu ne s'affiche pas car il n'y a pas de résultats ou la saisie semi-automatique est désactivée. Event - response(event, ui) Cet événement est déclenché une fois la recherche terminée, avant que le menu ne s'affiche. Cet événement est toujours déclenché lorsqu'une recherche se termine, même si le menu ne s'affiche pas car il n'y a pas de résultats ou la saisie semi-automatique est désactivée. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - content - Contient les données de réponse et peut être modifié pour changer les résultats qui seront affichés. Syntax `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
sept	recherche (événement, interface utilisateur) Cet événement est déclenché après que tout délai et que les critères minLength ont été satisfaits, juste avant que le mécanisme spécifié par la source ne soit activé. En cas d'annulation, l'opération de recherche est abandonnée. Event - search(event, ui) Cet événement est déclenché après que tout délai et que les critères minLength ont été satisfaits, juste avant que le mécanisme spécifié par la source ne soit activé. En cas d'annulation, l'opération de recherche est abandonnée. Où event est de type Event et ui est de type Object . Syntax `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	sélectionnez (événement, ui) Cet événement est déclenché lorsqu'une valeur est sélectionnée dans le menu de saisie semi-automatique. L'annulation de cet événement empêche la valeur d'être définie dans l'élément <input> (mais n'empêche pas le menu de se fermer). Event - select(event, ui) Cet événement est déclenché lorsqu'une valeur est sélectionnée dans le menu de saisie semi-automatique. L'annulation de cet événement empêche la valeur d'être définie dans l'élément <input> (mais n'empêche pas le menu de se fermer). Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - item - Un objet avec des propriétés d'étiquette et de valeur pour l'option sélectionnée. Syntax `$( ".selector" ).autocomplete({ select: function( event, ui ) {} });`

Exemple

L'exemple suivant illustre l'utilisation de la méthode d'événement dans les widgets de saisie semi-automatique. Cet exemple illustre l'utilisation du focus d' événements et de select .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() { var projects = [ { value: "java", label: "Java", desc: "write once run anywhere", }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label: "Twitter Bootstrap", desc: "popular front end frameworks ", } ]; $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
				
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML autocompleteexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript. Vous devez également voir la sortie suivante -

↰ Previous page Next page ↱

JqueryUI - Saisie semi-automatique

Syntaxe

$ (selector, context) .autocomplete (options), méthode

Syntaxe

Fonctionnalité par défaut

Utilisation de l'autofocus

Utilisation de minLength et delay

Utilisation de l'étiquette

Utilisation d'une source externe

$ (selector, context) .autocomplete ("action", params), méthode

Syntaxe

Exemple

Points d'extension

Gestion des événements sur les éléments de saisie semi-automatique

Exemple

Effets JqueryUI

Interactions JqueryUI

Tutoriel JqueryUI

Ressources utiles JqueryUI

Utilitaires JqueryUI

Widgets JqueryUI