Kode JS yang mengimplementasikan fungsi pemfilteran input pemilihan dari komponen pilih adalah sebagai berikut:
/*** Bagian antara // ****** menunjukkan kode fungsi yang ditambahkan pada kode yang tidak memilih fungsi penyaringan input ** // ***@description plugin ini memungkinkan Anda untuk membuat kotak terpilih yang dapat diedit seperti kotak teks sambil menjaga fitur pilihan*@description no mrisles atau gambar mondar*mondar @veric. Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)* @license For comercial use please contact me: martin.mende(at)aristech.de* * @requires jQuery 1.9+** @class editableSelect* @memberOf jQuery.fn** @example** var selectBox = $("select").editableSelect();* selectbox.addoption ("Saya ditambahkan secara dinamis");*/(function ($) {$ .fn.editableselect = function () {var instancevar; // this this.each () mengacu pada traversal objek ini. adalah selectif (originalselect [0] .tagname.touppercase () === "select") {// Bungkus SELECT asli menyisipkan kotak </Div> dalam <peclect> Perifer asli dari <pect> originalselect.wrap ($ ("<v/>")); var wrapper = originalselect.wrap ($ ("<Div/<v/")); var wrappers = originalselect.wrap ($ ("<v/<v/")); var wrapper = originalselect.waprap "inline-block"}); // Tempatkan input yang akan mewakili pilih yang dapat diedit // Tambahkan kotak input input pada menu pemilihan <input alt judul ..... value = ""> var inputselect = $ ("<input/>"). InsertBefore (originalselect); "dapatkan dan hapus original IDVar Objid = originalselect. originalSelect.removeAttr("id");//add the attributes from the original select//set various attributes of the input input box inputSelect.attr({alt: originalSelect.attr("alt"), title: originalSelect.attr("title"),class: originalSelect.attr("class"),name: originalSelect.attr("name"),disabled: Originalselect.attr ("Disabled"), TabIndex: Originalselect.attr ("TabIndex"), ID: OBJID}); // Dapatkan properti CSS yang dapat diedit dari selectvar rightpadding = 15; inputSelect.css ({width: originalselect.widding ()-rightpadding (outals. Originalselect.css ("FontFamily"), FontSize: Originalselect.css ("FontSize"), latar belakang: Originalselect.css ("latar belakang"), paddingright: rightpadding}); inputselect.val (originalselect.val ()); Tambahkan trifiGINGE AT = TRIGTERAGINGE (VAL UNGGUALLECT.VAL ()); $ ("<Div/>"). CSS ({Height: 0, Width: 0, Borderleft: "5px Solid Transparent", Borderright: "5px Solid Transparent", BorderEtop: "7px Solid #999", Posisi: "Relative", Top: (InputSelect.HEIGHT ()/2), "KIRIP", TOP: -(InputSelect.HEIGHT ()/2), "KIRIVE", TOP: -(InputSelect.HEIGHT ()/2) inputselect.width ()+rightpadding-10, marginbottom: "-7px", pointerevents: "none"}). InsertAfter (inputSelect); // Buat daftar yang dapat dipilih yang akan muncul ketika input mendapat fokus // saat berfokus, tambahkan <ol> <ol/> drop-down box var var selectlist = $ $ (" "none",listStyleType: "none",width: inputSelect.outerWidth()-2,padding: 0,margin: 0,border: "solid 1px #ccc",fontFamily: inputSelect.css("fontFamily"),fontSize: inputSelect.css("fontSize"),background: "#fff",position: "Absolute", Zindex: 1000000}). InsertAfter (Triangle); // Tambahkan opsi // penyimpanan semua data di kotak drop-down saat ini di variabel sumber daya // ****** var resourcedata = []; originalselect.children (). masing-masing (fungsi indeks, nilai) {persiapan ($ (nilai). wrapper); Resourcedata.push ($ (nilai) .text ());}); // ******/Bind the Focus Handler // Ketika mouse difokuskan, fadein (100), yaitu, pull-down menampilkan kotak drop-down input.focus (function () {selectList.fadein (100); Jika konten input tidak kosong, data dengan karakter dalam V akan ditemukan di semua data yang disimpan di kotak drop-down asli dan ditekan ke variabel newResourcedata // ******* var v = inputselect.val (); var newResourcedata = []; if! = "") {$. Ahliese (function) (function = ifeREx (v! = -1) newResourcedata.push (t);});} wrapper.children ("ol"). Kosong (); $. Masing -masing (newResourcedata, function (i, t) {preparedOption (t, wrapper);}); // *****}). Blur (function () {selectlist); }). keyup (fungsi (e) {if (e.which == 13) inputselect.trigger ("blur"); // peristiwa yang dieksekusi ketika tombol enter shortcut ditekan // ******* var v = inputSelect.val (); var newResourcedata = []; if! = ") {$. t) {if (t.indexOf (v)! = -1) newResourcedata.push (t);});} wrapper.children ("ol"). Ompton (); $. masing -masing (newResourcedata, function (i, t) {preparedOption (t, wrapper);});/// elementoriginalselect.css ({visibilitas: "tersembunyi", tampilan: "tidak ada"}); // simpan contoh ini untuk mengembalikan itinstancevar = inputselect} else {// bukan selectreturn false;}});//end setiap/*metode publik ** // *** Tambah opsi untuk editable*@parret @parret @paret @paret @paret @pare @pare @paret @paret @paret @paret @paret @paret @ppare @paret @paret @paret @paret @paret Sebuah @paret @paret Metode @parar inarar S mengedek*MO. {void}*/instancevar.addoption = function (value) {preparedOption (value, instancevar.parent ()); };/*** Menghapus opsi spesifik dari yang dapat diedit pilih* @param {string, angka} - nilai atau indeks untuk menghapus* @returns {void}*/instancevar.removeoption = fungsi (nilai) {switch (typeof (value)) {case "Number": instancevar.parent (). Anak -anak ("ol"). Anak -anak (": nth ("+value+")"). Remove (); break; kasus "string": instancevar.parent (). anak -anak ("ol"). anak -anak (). masing -masing (fungsi (indeks, opsivalue) {if ($ (optionValue) .text () == nilai) {$ (optionValue). {void}*/instancevar.Restoreselect = function () {var originalselect = instancevar.parent (). anak -anak ("pilih"); var objid = instancevar.attr ("id"); instancevar.parent () sebelum originalselect); instancevar.parent (). Tampilan: "Inline-block"}); Originalselect.attr ({id: objid});}; // kembalikan Instancereturn Instancevar;};/** Metode pribadi ** /// function persiapan untuk menambahkan fungsi opsi baru (nilai, wrapper) {var selectoption = $ ("<li>"+value+"</li>"). AppendTo (wrapper.children ("ol")); var inputSelect = wrapper.children ("input"); selectoption.css ({padding: "3px", textalign: "kiri", kursor: "pointer" {{{{{{{{{{{{{{pointer "{{pointer" {{pointer "{{pointer" {{pointer "{{pointor" {pointer "{pointor"). "#eee"});}, function () {selectOption.css ({backgroundColor: "#fff"}); }); // bind klik pada opsi inielectOption.click (function () {inputselect.val (selectOption.text ()); inputselect.trigger ("ubah");}); }} (jQuery));