رمز JS الذي ينفذ وظيفة تصفية إدخال التحديد لمكون SELECT كما يلي:
/*** يعرض الجزء بين // ****** رمز الوظيفة المضافة على الكود الذي لا يحدد وظيفة تصفية الإدخال ** // ***description يتيح لك هذا المكون الإضافي جعل مربع تحديد قابل للتحرير مثل مربع نص مع الاحتفاظ بميزات الاختيار الاختيار* @description no styless أو الصور المطلوبة للمكون الإضافي ** @version. Unported (CC BY-NC 3.0)* recenseens for comercial ، يرجى الاتصال بي: Martin.Mende (AT) ARISTECH.DE** @REQUIRES JQUERY 1.9+** @cclass editableselect* @memberof jquery.fn @exment تمت إضافة ") ؛*/(function ($) {$ .fn.editableselect = function () {var extrealVar ؛ // this.each () يشير إلى اجتياز الكائن الحالي. يشير الكائن الحالي هنا إلى اجتياز الكائنات الحالية للاختيار المنسدلة واحدة. selectif (OriginalsElect [0] .tagname.touppercase () === "SELECT") {// قم بلف التحديد الأصلي إدراج المربع <div> </viv> في periphery الأصلي <select> interseper (kerder> kervinglect.wrap ($ ("<div/>")) "inline-block"}) ؛ // ضع إدخالًا يمثل تحديد مربع الإدخال // القابل للتحرير في قائمة الإدخال في قائمة التحديد <title alt alte… " OriginalsElect.RemoVeattr ("id") ؛ // أضف السمات من SELECT الأصلي // تعيين سمات مختلفة من إدخال الإدخال inputselect.attr ({alt: Originalselect.attr ("alt") ، العنوان: Originalselect.attr ("title") Originalselect.attr ("Austabled") ، TabIndex: OriginalsElect.attr ("tabindex") ، ID: OBJID}) ؛ // الحصول على خصائص CSS القابلة للتحرير من selectvar rightpadding = 15 ؛ inputselect.css ({width: width. Originalselect.css ("fontfamily") ، الحجم: Originalselect.css ("fontsize") ، الخلفية: Originalselect.css ("الخلفية") ، PaddingRight: RightPadding}) ؛ inputselect.val (Originalselect.val () ؛ $ ("<div/>"). "-7px" ، pointerevents: "none"}). insertAfter (inputselect) ؛ // إنشاء قائمة قابلة للتحديد والتي ستظهر عندما يحصل الإدخال على التركيز // عند التركيز ، أضف <ol> <ol/> box box downlist = $ ("<ol/>"). inputselect.outerwidth ()-2 ، حشوة: 0 ، الهامش: 0 ، الحدود: "Solid 1PX #CCC" ، fontfamily: inputselect.css ("fontfamily") ، fontsize: inputselect.css ( 1000000}). insertafter (مثلث) ؛ // إضافة خيارات // تخزين جميع البيانات في مربع المنسدلة الحالي في متغير ResourcedAta // ****** var resourcsedata = [] Wrapper) ؛ Resourcedata.push ($ (value) .text ()) ؛}) ؛ // ******/ربط معالج التركيز // عندما يكون الماوس يركز ، fadein (100) ، أي ، يعرض المنسدلة المربع المربع الحالي إدخال الإدخال. إذا لم يكن محتوى الإدخال فارغًا ، فسيتم العثور على البيانات التي تحتوي على الأحرف في V في جميع البيانات المخزنة في المربع المنسدلة الأصلي والضغط عليها في NewResourCedata Varioun -1) newResourCedata.push (t) ؛}) ؛} closper.children ("ol") }). keyup (function (e) {if ( ! = -1) newResourCedata.push (t) ؛}) ؛} clospper.children ("ol"). فارغة () ؛ $. كل (NewResourCedata ، الوظيفة (i ، t) {التحضير (t ، wrapper) ؛}) ؛ // *******}) ؛ "none"}) ؛ // احفظ هذا المثيل لإرجاع itinstancevar = inputselect} آخر {// not a selectreturn false ؛}}) ؛ // - end كل/** الأساليب العامة ** // *** يضيف خيارًا إلى reditable select*param {string} القيمة - قيمة الخيارات*returns {void} مثيل extar.parent ()) ؛ } ؛/*** يزيل خيارًا محددًا من SELECT SELECT* param {string ، number} القيمة - القيمة أو الفهرس إلى حذف* returns {void}*/eastyvar.removeOption = function (value) {switch (typeof (value)) {case case "الرقم": easulevar.parent (). الأطفال ("OL"). الأطفال (": nth ("+value+")"). إزالة () ؛ كسر ؛ حالة "سلسلة": almatevar.parent (). الأطفال ("OL"). الأطفال (). كل (دالة (فهرس ، خيار Value) {if ($ (OptionValue) .Text () == value) {$ ($ (orpoyvalue) .Remove () ؛}}) ؛ = function () {var OriginalSelect = eastyvar.parent (). الأطفال ("SELECT") ؛ var objid = eastyvar.attr ("id") ؛ almatevar.parent (). objid}) ؛} ؛ // إرجاع instancereturn مثيل ؛} ؛/** الأساليب الخاصة ** /// repressOption وظيفة إضافة وظيفة خيار جديدة repressOption (القيمة ، التفاف) {var selectOption = $ ("<li>" Wrapper.Children ("Input") ؛ SelectOption.css ({padding: "3px" ، textalign: "left" ، usursor: }) ؛ // bind انقر فوق هذا OptionSelectOption.click (function () {inputselect.val (selectOption.text ()) ؛ inputselect.trigger ("change") ؛}) ؛ }} (jQuery)) ؛