Mon style, présentons d'abord les rendus. Si vous pensez que c'est assez bon, veuillez vous référer au code d'implémentation.
Ne parlons pas d'abeille et ne regardons pas la hiérarchie div d'abord
<! - La div la plus externe peut être spécifiée à tout moment pour définir la largeur de l'élément enfant -> <div> <! - Form étiqueter Ajouter des invites de texte -> <étiquette pour = ""> Recherche de texte complet </BEALD> <! - Les choix multiples pour héberger div ajouteront dynamiquement des entrées dans le futur -> <isSed> <! - Les éléments de formulaire sont utilisés pour lier des événements d'écoute et des entrées utilisateur, Span sera dynamiquement ajoutée dynamiquement au-dessus de la couche -> CONSETT name = "hint-search" value = "" placeholder = "sélectionnez les mots clés ou appuyez sur l'onglet ou entrez pour diviser les mots clés"> </v> <! - Incluez les colonnes de liste déroulante -> <v> <! - Ajoutez dynamiquement Li en fonction des paquets de données JSON -> <ul> </ul> </v>
L'annotation de la structure DOM peut être expliquée clairement, jetons un coup d'œil à CSS
* {Box-Sizing: Border-Box;}. 1px; max-largeur: 100%; line-height: 30px;}. 10px; rembourrage: 4px 6px; bordure: Aucun; Text-shadow: Aucun; Border-Radius: 3px; Font-Weight: 200;}. Label-Primary {Background: # 2693ff; Color: White;}. blanc;}. tag [data-role = "retire"] {margin-left: 2px; curseur: pointeur;} entrée [name = 'hint-search'] {border: non; box-shadow: non; 100px; max-height: 120px; fond-couleur: #ffff; overflow: auto; affichage: aucun; z-index: 9999;}. li: Hover {fond-couleur: #eee;}Il est important de définir la taille des frontières: Border-Box en CSS. Cette propriété peut faire du rembourrage et une calcul de bordure en largeur
.HINT-INTUP-SPAN-Container Il est également important de définir l'affichage sur le bloc en ligne, il y a une liste de balises
.Hint-block définit z-index sur 9999 pour assurer l'affichage à l'extrémité avant, et la position est absolue pour garantir sa position
Tous les autres peuvent être ajustés en fonction de vos besoins
Voyons le code JS ci-dessous
$ (function () {// json data packet var data = {data: ["123", "Hello Beijing", "Beijing Welcome", "Beijing Good", "Ocean", "Ocean Guangli Bureau", "I Ocean", "I a été surpris", "I Lalala" Mountain "," Ethiopia "," ibaka "," bibi "]}; // Obtenez l'objet Dom qui doit être appelé plusieurs fois plus tard var $ hintsearch = $ (" entrée [name = 'hint-search'] "); var $ hintsearchContainer = $ (". $ (". hint-ul"); // ajouter le dictionnaire adddictionary (data.data, addullistener); // définir la largeur de la liste du dictionnaire SethintSearchContainerWidth (); // implémenter une écoute de redimensionner $ (window) .bind ('redize', sethIntSearchContainerWidth); // get Focus $ hintsesearch.focus (function () {animtedown ();}); // perdant focus // définir le délai afin d'écouter à cliquer sur la réponse $ hintsearch.blur (function () {setTimeout (function () {aniMateUp ();}, 200);}); // tab and Entar Event // Speak the tabs of tab et Entre bel empêché de bouillonner et de commutation focus $ hintsearch.keydown (function (e) {switch (e.which) {cas 9: cas 13: {var text = $ hintsearch.val (); if (! $. Trim (text)) {$ hintsearch.val (""); e.preventDefault (); return;} if (! checkContainerHas (text)) {$ hintsearch.before ('<span>' + text + '<i data-role = "retire"> </i> <i> </i> </i> </span> '); addSpanListenr ();} // console.log ($ hintsearch.val ()); $ hintsearch.val (""); $ hintsesearch.focus (); e.preventDefault ();} par défaut:;}}); Pairling // correspond au contenu d'entrée dans Li Si la chaîne est incluse, elle peut être trouvée et renvoyée // La méthode de recherche peut être modifiée par elle-même. data.data.filter (fonction (x) {return x.indexof (text)! = -1;}) if (tmparr.length === 0) {tmparr.push ("No correspondant à l'entrée");} Updatedictionary (tmparr, addulListERner);}) // Fonction Library // Add a Common Dictiction Bibliothèque Dictionnaire pour les utilisateurs pour les utilisateurs AdddIctionary (Callear) {pour (var i = 0; i <dataarr.length; i ++) {$ hintul.append ('<li>' + dataarr [i] + '</li>');} callback ();} // metter la fonction de recherche de la recherche de contenu (dataarr, callback) {$ hintul.empty (); Fonction de bordure Animtedown () {$ hintblock.slidedown ('Fast'). CSS ({'border': '1px solide # 96c8da', 'border-top': '0px', 'box-shadow': '0 2px 3px 0 rgba (34,36,38, .15) '}); $ hintsearchContainer.css ({' border ':' 1px solide # 96c8da ',' border-bottom ':' 0px ',' box-shadow ':' 0 2px 3px 0 rgba (34,36,38, .15) '});} aniMateUp () {$ hintblock.slideUp ('Fast', function () {$ hintsearchContainer.css ({'border': '1px solide #ccc'});});});} // vérifie si elle est répétée avec la fonction d'entrée CheckContainerhas (Text) {var Flag = 0; $ (".".. Span "). Chaque (fonction () {if ($ .trim (text) == $ .trim ($ (this) .text ())) {flag = 1; return;}}); return drapeau? true: false;} // définir la fonction de largeur de la largeur de la largeur de l'on parseInt ($ hintsearchContainer.css ('border-left'). Match (/ [0-9] + /) [0]); $ hintblock.css ({'width': hint_width});} // bind Click Event function AddulListener () {$ hintul.delegate ('li', 'clique $ (this) .text (); if (! checkContainerHas (text)) {$ hintSearch.before ('<span>' + text + '<i data-role = "repos"> </i> <i> </i> </i> </span>'); addSpanListenr ();} $ hintsearch.val (""); AnimateUp ();)} addSpanListenr () {$ (". Hint-Input-span-container Span"). Delegate ("i", 'click', function () {$ (this) .parent (). retire ();})}})L'accent est mis sur l'écoute d'événements et les éléments DOM en fonctionnement, qui dépend de jQuery.
Ce qui précède est la méthode d'implémentation déroulante à sélection multiple d'entrée du composant d'interface utilisateur qui vous est présenté par l'éditeur (avec fonction de recherche). J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!