รหัส JS ที่ใช้ฟังก์ชั่นการกรองอินพุตการเลือกของส่วนประกอบที่เลือกมีดังนี้:
/*** ชิ้นส่วนระหว่าง // ****** แสดงรหัสฟังก์ชั่นที่เพิ่มลงในรหัสที่ไม่ได้เลือกฟังก์ชั่นการกรองอินพุต ** // ***@description ปลั๊กอินนี้ช่วยให้คุณสามารถเลือกกล่องได้เช่นกล่องข้อความ 3.0 unported (CC BY-NC 3.0)* @License สำหรับการใช้งาน comercial โปรดติดต่อฉัน: martin.mende (at) aristech.de** @requires jQuery 1.9+** @class editablectelect* @memberof jQuery.fn ** @ตัวอย่าง เพิ่ม ");*/(ฟังก์ชั่น ($) {$ .fn.editableSelect = function () {var instancevar; // this.each () หมายถึงการสำรวจของวัตถุปัจจุบันวัตถุปัจจุบันที่นี่หมายถึงการสำรวจของสองช่องทาง Selectif (OriginalSelect [0] .tagname.touppercase () === "select") {// wrap select ดั้งเดิมแทรกกล่อง <div> </div> ในต้นฉบับ <Select> รอบนอกของต้นฉบับ <Select> riOnAlsElect.wrap ($ ("<div/>"); var wrapper = แหล่งกำเนิด "inline-block"}); // วางอินพุตซึ่งจะเป็นตัวแทนของการเลือกที่แก้ไขได้ // เพิ่มกล่องอินพุตอินพุตในเมนูการเลือก <อินพุต alt title ..... value = ""> var inputelect = $ ("<put/>"). insertbefore (OriginalSelect); OriginalSelect.removeattr ("id"); // เพิ่มแอตทริบิวต์จากตัวเลือกดั้งเดิม // ตั้งคุณลักษณะต่าง ๆ ของอินพุตกล่องอินพุต inputelect.attr ({alt: OriginalSelect.attr ("alt"), ชื่อ: OriginalSelect.attr ("ชื่อ"), คลาส OriginalSelect.attr ("ปิดการใช้งาน"), tabindex: OriginalSelect.attr ("tabindex"), id: objid}); // รับคุณสมบัติ CSS ที่แก้ไขได้จาก selectvar rightpadding = 15; inputelect.css OriginalSelect.css ("fontfamily"), FontSize: OriginalSelect.css ("Fontsize"), พื้นหลัง: OriginalSelect.css ("พื้นหลัง"), Paddingright: Rightpadding}); inputelect.val (OriginalSelect.val (); $ ("<div/>"). css ({ความสูง: 0, ความกว้าง: 0, borderleft: "5px ของแข็งโปร่งใส", borderright: "5px ทึบโปร่งใส", bordertop: "7px solid #999", ตำแหน่ง: "ญาติ", ด้านบน:-(อินพุต "-7px", pointerevents: "ไม่มี"}). insertafter (inputelect); // สร้างรายการที่เลือกได้ที่จะปรากฏขึ้นเมื่ออินพุตได้รับโฟกัส // เมื่อโฟกัสเพิ่ม <ol> <ol/> กล่องดรอปดาวน์ selectList = $ ("<ol/>") css ({display: InputSelect.outerWidth ()-2, padding: 0, margin: 0, border: "solid 1px #ccc", fontfamily: inputelect.css ("fontfamily"), fontsize: inputelect.css ("fontsize"), พื้นหลัง: 100000}). insertfter (สามเหลี่ยม); // เพิ่มตัวเลือก // ที่เก็บข้อมูลทั้งหมดในกล่องดรอปดาวน์ปัจจุบันในตัวแปร ResourceData // ****** var var resource wrapper); ResourceData.push ($ (value) .Text ());}); // ******/ผูกตัวจัดการโฟกัส // เมื่อเมาส์โฟกัส, fadein (100) นั่นคือการดึงลงจะแสดงอินพุตแบบดรอปดาวน์ในปัจจุบัน หากเนื้อหาอินพุตไม่ว่างเปล่าข้อมูลที่มีอักขระใน V จะพบได้ในข้อมูลทั้งหมดที่เก็บไว้ในกล่องดรอปดาวน์ดั้งเดิมและกดลงในตัวแปร newResourcedata // ******* var v = inputelect.val (); var newResourcedata = []; ถ้า (v! = ") -1) newResourceData.push (t);});} wrapper.children ("ol"). ว่างเปล่า (); $. แต่ละ (newresourcedata, ฟังก์ชั่น (i, t) {prepailoption (t, wrapper);}); // *******}) }). keyup (ฟังก์ชั่น (e) {ถ้า (e.which == 13) inputselect.trigger ("blur"); // เหตุการณ์ที่ดำเนินการเมื่อกดปุ่มลัดถูกกด // ******* var v = inputselect.val () var newresourcedata = []; ถ้า (v! ! = -1) newResourcedata.push (t);});} wrapper.children ("ol"). ว่างเปล่า (); $. แต่ละ (newresourcedata, ฟังก์ชั่น (i, t) {prepauloption (t, wrapper);}); // *******}; "ไม่มี"}); // บันทึกอินสแตนซ์นี้เพื่อส่งคืน iTinstanceVar = inputSelect} else {// ไม่ใช่ selectreturn false;}}}); // - สิ้นสุดแต่ละวิธีการสาธารณะ ** ** // *** เพิ่มตัวเลือกในการแก้ไข*@param {String} ฟังก์ชั่น (ค่า) {prepareoption (ค่า, instancevar.parent ()); };/*** ลบตัวเลือกเฉพาะออกจากตัวเลือกที่แก้ไขได้* @param {สตริง, หมายเลข} ค่า - ค่าหรือดัชนีเพื่อลบ* @returns {void}*/instanceVar.removeOption = function (ค่า) {switch (typeof (value)) "number": Instancevar.parent (). เด็ก ๆ ("ol") เด็ก (": n ("+ค่า+")"). ลบ (); break; กรณี "String": InstanceVar.Parent (). เด็ก ๆ ("ol") เด็ก (). แต่ละ (ฟังก์ชั่น (ดัชนี, ตัวเลือก) {ถ้า ($ (optiveValue) .Text () == ค่า) {$ (OptionValue). remove ();}}); break;}};/*** {void}*/instanceVar.restoreselect = function () {var OriginalSelect = InstanceVar.parent (). เด็ก ๆ ("เลือก"); var objid = instanceVar.attr ("id"); instancevar.parent () "inline-block"}); OriginalSelect.attr ({id: objid});}; // ส่งคืน Instancereturn InstanceVar;};/** วิธีการส่วนตัว ** //// prepayOption ฟังก์ชั่นคือการเพิ่มฟังก์ชั่นตัวเลือกใหม่ $ ("<li>"+value+"</li>"). ภาคผนวก (wrapper.children ("ol")); var inputlect = wrapper.children ("อินพุต"); selectoption.css ({padding: "3px", textalign: "#eee"});}, function () {selectoption.css ({backgroundColor: "#FFF"}); }); // bind คลิกที่ตัวเลือกนี้นี้ click.click (function () {inputelect.val (selectoption.text ()); inputelect.trigger ("เปลี่ยน");}); }} (jQuery));