Comment utiliser le widget de saisie semi-automatique de l'interface utilisateur jQuery

Nous devrons également créer un lien vers les fichiers décompressés à partir de l’archive jQuery UI, ainsi qu’une feuille de style personnalisée; les fichiers suivants devraient aller dans le de la page:

Les fichiers suivants doivent aller à la fin de la :

Étape 3 Styliser le formulaire

Nous utilisons un thème très simple et neutre dans cet exemple, dont la plupart est purement illustratif. Très peu de styles sont nécessaires et la plupart peuvent être modifiés si nécessaire. Le CSS suivant est utilisé dans le autocomplete.css feuille de style (tout le style de l’interface utilisateur jQuery est dans jquery-ui-1.8.custom.css feuille de style):

#formWrap padding: 10px; position: absolue; float: gauche; couleur de fond: # 000; arrière-plan: rgba (0,0,0, 0,5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;  #messageForm width: 326px; bordure: 1px solide # 666; couleur de fond: #eee;  #messageForm fieldset padding: 0; marge: 0; position: relative; bordure: aucune; couleur de fond: #eee;  #messageForm légende visibilité: caché; hauteur: 0;  #messageForm span display: block; largeur: 326px; remplissage: 10px 0; marge: 0 0 20px; retrait du texte: 20px; couleur de fond: #bbb; bordure inférieure: solide 1px # 333; police: 18px Georgia, Serif; couleur: #fff;  #friends width: 274px; remplissage: 3px 3px 0; marge: 0 auto; bordure: 1px solide #aaa; couleur d'arrière-plan: #fff; curseur: texte;  #messageForm #to width: 30px; marge: 0 0 2 px 0; remplissage: 0 0 3px; position: relative; en haut: 0; float: gauche; bordure: aucune;  #messageForm input, #messageForm textarea display: block; largeur: 274px; rembourrage: 3px; marge: 0 auto 20px; bordure: 1px solide #aaa;  #messageForm label display: block; marge: 20px 0 3px; retrait du texte: 22px; police: gras 11px Verdana, Sans-serif; couleur: # 666;  #messageForm #toLabel margin-top: 0;  #messageForm button float: right; marge: 0 0 20px 0;  #messageForm #cancel margin-right: 20px;  #friends span display: block; marge: 0 3px 3px 0; remplissage: 3px 20px 4px 8px; position: relative; float: gauche; couleur de fond: #eee; bordure: 1px solide # 333; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; couleur: # 333; police: normale 11px Verdana, Sans-serif;  # amis couvrent une position: absolute; à droite: 8px; en haut: 2px; couleur: # 666; police: bold 12px Verdana, Sans-serif; texte-décoration: aucun;  #friends span a: hover color: # ff0000;  .ui-menu .ui-menu-item white-space: nowrap; remplissage: 0 10px 0 0; 

Pour donner au formulaire une belle bordure transparente avec des coins arrondis, nous utilisons le CSS3 RGBa règle et la -moz-border-radius, -webkit-border-radius et rayon de la frontière règles; les navigateurs les plus populaires prennent désormais en charge ces règles, notamment Firefox, Safari, Chrome et Opera. IE ne prend en charge l’un d’eux, et bien qu’il puisse utiliser un filtre pour implémenter une opacité rudimentaire, il faudrait prendre en charge les angles arrondis au moyen d’images. L'efficacité de la RGBa la transparence n'est pas montrée au maximum dans cet exemple; mais ce type de formulaire serait probablement utilisé comme superposition modale flottante dans une implémentation complète, qui se placerait au-dessus du contenu réel de la page..

Le conteneur

autour du champ auquel le champ de texte de saisie semi-automatique sera attaché aura le même positionnement et le même style que le éléments, mais le à l'intérieur de ce conteneur, sa bordure est supprimée de manière à être masquée. Nous réduisons également sa largeur et le faisons flotter à gauche. C’est pour que lorsque nous ajoutons les destinataires formatés au

la ne pas déborder et augmenter la hauteur de la

inutilement.

Nous appelons également les destinataires, qui seront ajoutés au

comme éléments contenant un lien. La plupart d'entre eux sont stylés pour correspondre au thème de base et ont également des coins arrondis. Il est important que ces éléments soient placés au niveau des blocs et flottent de manière à ce qu'ils s'empilent correctement. Nous devons également remplacer certains styles de saisie semi-automatique fournis par le thème de l'interface utilisateur jQuery que nous utilisons. le dernier sélecteur empêche simplement les suggestions individuelles dans le menu de se séparer entre les mots, ce qui se produit parce que nous avons créé le il est associé à si petit.

A ce stade, le formulaire devrait ressembler à ceci:

---

Étape 4: Fixation de la saisie semi-automatique

Ensuite, nous devons attacher le widget de saisie semi-automatique à la dans le

; Pour ce faire, nous pouvons utiliser le script suivant:

Le widget est attaché à la en utilisant le autocomplete () méthode. Nous fournissons un littéral d'objet en tant qu'argument de la méthode, qui configure le la source option et le sélectionner et changement rappels d'événements.

le la source L'option est utilisée pour indiquer au widget où obtenir les suggestions pour le menu de saisie semi-automatique. Nous utilisons une fonction comme valeur de cette option, qui accepte deux arguments; le premier est le terme entré dans la , la seconde est une fonction de rappel utilisée pour renvoyer les suggestions au widget.

Dans cette fonction, nous utilisons jQuery getJSON () méthode pour passer le terme à un fichier PHP côté serveur. Le fichier PHP utilisera le terme pour extraire les noms de contact correspondants d'une base de données MySql. Nous utilisons un rappel JSONP pour traiter les données renvoyées par le serveur. la fonction de rappel transmise comme second argument de l'option source s'attend à recevoir les données d'un tableau. Nous créons donc d'abord un tableau vide, puis utilisons celui de jQuery. chaque() méthode pour traiter chaque élément du tableau JSON renvoyé par le serveur. Nous parcourons simplement chaque élément de ce tableau et ajoutons chaque suggestion à notre nouveau tableau. Une fois que notre nouveau tableau est construit, nous le passons à la fonction de rappel pour que le widget s'affiche dans le menu..

Nous définissons ensuite un gestionnaire pour la personnalisation de la saisie semi-automatique sélectionner un événement; cette fonction sera exécutée par le widget chaque fois qu'une suggestion est sélectionnée dans le menu de saisie semi-automatique. Cette fonction reçoit automatiquement deux arguments - l’objet event et un ui objet contenant la suggestion sélectionnée. Nous utilisons cette fonction pour formater le nom du destinataire et l’ajouter au

. Nous créons simplement un élément pour contenir le texte et un élément d'ancrage pouvant être utilisé pour supprimer le destinataire. Une fois le destinataire formaté créé, il suffit de l’insérer directement avant le camouflé. .

Enfin, nous ajoutons un gestionnaire pour le changement un événement; cette fonction sera invoquée chaque fois que la valeur du que la saisie semi-automatique est associée aux modifications. Nous l'utilisons simplement pour supprimer la valeur du parce que nous avons déjà ajouté la version formatée à notre conteneur

. Le carat semble un peu haut une fois qu'un nom de contact formaté a été ajouté à la liste.

donc nous utilisons également ce gestionnaire d'événements pour corriger cette.

C'est toute la configuration dont nous avons besoin pour cette implémentation particulière, mais il reste quelques fonctions supplémentaires que nous devons ajouter pour ranger un peu les choses. Après le autocomplete () méthode ajouter le code suivant:

// ajoute le gestionnaire de clics à friends div $ ("# amis"). click (function () // focus 'to' field $ ("# à"). focus ();); // ajouter un gestionnaire actif pour les clics sur les liens de suppression $ (". remove", document.getElementById ("amis")). live ("clic", function () // supprime un ami actuel $ (this) .parent () .remove (); // corrige la position du champ si ($ ("# amis span"). length === 0) $ ("# à"). css ("top", 0); )

le que notre Autocomplete est attaché à est partiellement caché et son conteneur

est stylé de sorte qu'il apparaisse comme les autres champs du formulaire; pour compléter la déception, nous ajoutons un gestionnaire de clics au conteneur

de sorte que cliquer n'importe où dans le centre concentre le réel . Visuellement et fonctionnellement maintenant le

devrait être impossible à distinguer d'un champ régulier.

Nous devons également gérer les clics sur l'ancre ajoutée à chaque destinataire mis en forme. nous utilisons jQuery vivre() méthode car ces éléments peuvent ou non exister sur la page à un moment donné et il est plus facile que de lier la fonction de gestionnaire chaque fois que nous créons un de ces ancres. Lorsque nous cliquons sur l'une de ces ancres, nous ne faisons que naviguer jusqu'au parent de l'ancre sur laquelle nous avons cliqué, puis nous la supprimons de la page. Rappelez-vous quand nous avons corrigé la position du carat plus tôt dans le script? Il suffit de vérifier si tous les destinataires ont été supprimés et, le cas échéant, de rétablir sa position par défaut..

---

Étape 5 Code et ressources supplémentaires

J'ai utilisé une base de données MySql contenant un tableau répertoriant chacun des noms de destinataires et le fichier PHP suivant pour accepter les données envoyées par le serveur. getJSON () méthode et extraire les destinataires correspondants de la base de données:

 $ row ["name"]);  // echo JSON vers la page $ response = $ _GET ["callback"]. "(". json_encode ($ friends). ")"; echo $ réponse; mysql_close ($ server); ?>

Pour exécuter les exemples de fichiers téléchargeables, vous aurez besoin d’un serveur Web de développement avec PHP installé et configuré, ainsi que de MySql et de la base de données et de la table appropriées. Lorsqu'une lettre est saisie dans le champ "à", cette lettre est transmise au serveur et utilisée pour extraire chaque nom commençant par la lettre saisie. Les noms correspondants sont ensuite renvoyés à la page en tant que JSON et affichés dans le menu de suggestion:

Ce tutoriel a montré comment reproduire le formulaire d'envoi de messages de Facebook, en particulier la manière dont des amis sont ajoutés au formulaire de messagerie en tant que destinataires à l'aide d'une saisie semi-automatique, et comment les noms des amis sont formatés une fois qu'ils ont été ajoutés de manière à pouvoir être facilement supprimés. Notre exemple de formulaire ne fait réellement rien, mais ce que nous aurions besoin de faire pour envoyer le formulaire serait de passer le contenu du formulaire à un fichier côté serveur pour l'envoi via AJAX, ce qui pourrait facilement être branché sur le formulaire d'envoi. événement du bouton d'envoi utilisé sur le formulaire.

Les destinataires devraient bien sûr avoir un sens quelconque dans le système d’arrière-plan et seraient probablement mappés aux adresses électroniques de la base de données. Nous aurions besoin de récupérer le contenu textuel de chacun des éléments avant de revenir au serveur, bien que ce soit une question assez triviale.

Le widget de saisie semi-automatique de l'interface utilisateur jQuery facilite la connexion à n'importe quelle source de données et contient une riche suite de gestionnaires d'événements auxquels nous pouvons fournir des fonctions afin de réagir au texte saisi dans le champ associé ou à une suggestion sélectionnée dans le menu. Le widget est conçu à l'aide de la structure CSS étendue de jQuery UI et peut facilement être modifié pour correspondre au thème de votre site. Dans l'ensemble, c'est un excellent widget facile à utiliser et offrant une fonctionnalité exceptionnelle.

Code

Comment utiliser les dernières mises à jour de l'API Marketplace

Comment utiliser la fonction jQuery pour sélectionner des éléments

×