Le code JS qui implémente la fonction de filtrage d'entrée de sélection du composant SELECT est le suivant:
/ *** La pièce entre // ****** affiche le code de fonction ajouté sur le code qui ne sélectionne pas la fonction de filtrage d'entrée ** // ** * @Description Ce plugin vous permet de créer une boîte de sélection modifiable comme une zone de texte tout en gardant son plugin ** @VORSION 0.0.1 * @Author martin mende * @license ATTRIBRES Unported (CC BY-NC 3.0) * @LICENNE POUR UTILISATION COMERCIAL Veuillez me contacter: Martin.Mende (at) Aristech.de * * @Requires jQuery 1.9 + ** @class EditableSelect * @memberof jQuery.fn ** @ Exemple ** var SelectBox = $ ("Select"). Ajouté "); * / (fonction ($) {$ .fn.EditableSelect = function () {var instanceVar; // this.each () fait référence à la traversée de l'objet actuel. L'objet actuel fait ici référence à la traversée des deux éléments de sélection de sélection actuels ( SELECTIF (OriginalSelect [0] .tagname.touppercase () === "SELECT") {// Enveloppez le SELECT original insère la boîte <div> </div> dans la périphérie d'origine <lect> de la <lelect> originalSelect.wrap ($ ("<div />"); Var wrapper = OriginalSelect.parent (); wrapper.css ({affichez: Affichage: Affichage: Affichage: Affichage: Affichage: OriginalSelect (); wrapper.css ({affichage: Affichage: Affichage: Affichage: Affichage: Affichage: OriginalSelect. "Block en ligne"}); // Placez une entrée qui représentera le TELECT modifiable // Ajouter la zone d'entrée d'entrée du menu de sélection <Titre de l'entrée ..... ""> var inputSelect = $ ("<input />"). insertBefore (OriginalSelect); // get and retirez l'idvar original objid = originalSelect.attr ("id"); OriginalSelect.Removeattr ("id"); // Ajoutez les attributs de la sélection d'origine // définir divers attributs de la boîte d'entrée d'entrée inputSelect.attr ({alt: "title"), classe: "Nom") OriginalSelect.attr ("Disabled"), Tabindex: OriginalSelect.attr ("Tabindex"), id: objid}); // Obtenez les propriétés CSS modifiables de la SelectVar RightPadding = 15; InputSelect.css ({Width: OriginalSelect.Width () OriginalSelect.css ("Fontfamily"), Fontize: OriginalSelect.css ("Fontize"), arrière-plan: OriginalSelect.css ("Background"), PaddingRight: RightPadding}); InputSelect.val (OriginalSelect.Val ()); // Ajouter le triangle au ventre Triangle = $ ("<div />"). CSS ({hauteur: 0, largeur: 0, borderleft: "5px solide transparent", borderright: "5px solide transparent", bordertop: "7px solide # 999", position: "relatif", top: - (inputSelect.Height () / 2), gauche: Entrée SELLECT.WIDTH () + droit de droite-0, margin-5, gauche. "-7px", Pointevents: "Aucun"}). INSERTAFTER (InputSelect); // Créer la liste sélectionnable qui apparaîtra lorsque l'entrée obtiendra une mise au point // lors de la mise au point, ajoutez le <l> <ol /> Drop-Down Box var SelectList = $ ("<ol />"). CSS ({affiche: "None", ListSyleTyleType: "Aucun", width: width: width: width: width: width: wardth: inputSelect.outerWidth () - 2, padding: 0, marge: 0, bordure: "Solid 1px #ccc", Fontfamily: inputSelect.css ("Fontfamily"), FonTSize: InputSelect.css ("FonTSize"), arrière-plan: "#fff", "Absolue", Zindex: 1000000}). INSERTAFTER (TRIANGLE); // Ajouter des options // Stockage toutes les données dans la zone déroulante actuelle dans la variable ResourceData // ****** var ResourceData = []; OriginalSelect.Children (). Chaque (fonction (index, value) {PrépareOption ($ (valeur) .Text (), wrapper); Resourcedata.push ($ (valeur) .text ());}); // ****** / lier le gestionnaire de mise au point // Lorsque la souris est focalisée, Fadein (100), c'est-à-dire le traction affiche la boîte déroulante en cours d'entrée. Si le contenu d'entrée n'est pas vide, les données avec les caractères en V se trouvent dans toutes les données stockées dans la boîte déroulante d'origine et appuyées dans la variable NewResourceData // ******* var v = inputSelect.val (); var newResourcedata = []; if (v! = "") {$ .Each (ResourceData, fonction (i, t) {if (t.Indexof (V)! =) -1) newResourcedata.push (t);});} wrapper.children ("ol"). Vide (); $. Chaque (newResourcedata, function (i, t) {prepareOption (t, wrapper);}); // *******}). }). KeyUp (fonction (e) {if (e.which == 13) inputSelect.trigger ("blur"); // événements exécutés lorsque la touche de raccourci Entrée est appuyée sur // ******* var v = inputSelect.val (); var newResourcedata = []; if (v! = "") -1) newResourcedata.push (t);});} wrapper.children ("ol"). Vide (); $. Chaque (newResourcedata, function (i, t) {prepareOption (t, wrapper);}); // *******}); // Hide a été original. "Aucun"}); // Enregistrez cette instance pour renvoyer itinstancevar = inputSelect} else {// pas un selectreturn false;}}); // - fin chaque / * méthodes publiques ** // *** ajoute une option à la valeur modifiable * @param {string} valeur - la valeur des options * @Returns {vide} * / instanceVar.addoption = Fondule) instanceVar.parent ()); }; / *** supprime une option spécifique de la valeur modifiable SELECT * @param {String, Number} - La valeur ou l'index pour supprimer * @returns {void} * / instanceVar.RemoveOption = function (value) {switch (typeof (value)) {case "Numéro": instanceVar.parent (). Enfants ("OL"). Enfants (": NTH (" + Value + ")"). REPOUR (); Break; case "String": instanceVar.parent (). enfants ("ol"). enfants (). Chaque (fonction (index, optionValue) {if ($ (optionValue) .Text () == value) {$ (optionValue) .Remove ();}}); Break;}}; / *** réselets le SELECT To it it it itores * @rerns {void. function () {var originalSelect = instanceVar.parent (). enfants ("select"); var objid = instanceVar.attr ("id"); instanceVar.parent (). AVANT (OriginalSelect); instanceVar.parent (). objid});}; // Renvoie la fonction InstanceRenTurn InstanceVar;}; / ** Méthodes privées ** //// Préparer la fonction est d'ajouter une nouvelle fonction d'option préparent (valeur, wrapper). wrapper.children ("entrée"); selectOption.css ({padding: "3px", textalign: "Left", curseur: "pointer"}). hover (function () {selectOption.css ({backgroundColor: "#eee"});}, function () {selectOption.css ({backgroundColor: "}); }); // lier cliquez sur cette optionSelectOption.click (function () {inputSelect.val (selectOption.Text ()); inputSelect.trigger ("change");}); }} (jQuery));