Код JS, который реализует функцию фильтрации входной фильтрации выбора компонента SELECT, заключается в следующем:
/*** Часть между // ****** показывает код функции, добавленный в коде, который не выбирает функцию входной фильтрации ** // ***@description Этот плагин позволяет создавать редактируемое поле для выбора, как текстовое поле, сохраняя его select-option. 3.0 Unported (cc by-nc 3.0)* @license для использования коммерка, пожалуйста, свяжитесь со мной: martin.mende (at) aristech.de** @requires jquery 1.9+** @class editableselect* @memberof jquery.fn ** @Пример ** varbox = $ (select ».). Добавлен ");*/(function ($) {$ .fn.editableselect = function () {var exancevar; // this this.each () относится к переселению текущего объекта. Текущий объект здесь относится к переселению текущего двух раскрывающегося ящика выбора одного на один на один это. selectif (OriginAlSelect [0] .tagName.touppercase () === "select") {// Обернуть исходные выборы вставки вставку <viv> </div> в оригинальной периферии исходной <seumn> OriginalLect.Wrap ($ ("<div/>")); "inline-block"}); // Разместите вход, который будет представлять редактируемый Select // Advice входное окно в меню выбора <input alt witn = value = ""> var inputelect = $ ("<inpute/>"). insertbefore (OriginalLeselect); // Получить и удалить исходный idvar objid = OriginAlcelect.attr ("id"); OriginalSelect.RemoVeattr ("id"); // Добавить атрибуты из исходного select // Установить различные атрибуты ввода ввода ввода inputelect.attr ({alt: OriginalSelect.attr ("alt"), заголовок: OriginalSelect.attr ("title"), класс: inigonalSelect.attr ("class"), имя: inigonalLect. OriginalSelect.attr ("Disablet"), TabIndex: OriginalSelect.attr ("tabIndex"), ID: objid}); // Получить редактируемые свойства CSS от правой падения SelectVAR = 15; inputSelect.css ({width: inigoralalselect.width ()-Правозащитное, щити: eignalLect.hehilect (), firallect.width OriginalSelect.css ("fontfamily"), fontsize: OriginalSelect.css ("fontsize"), фон: OriginalSelect.css ("Фон"), Paddingright: Right Padding}); inputeSelect.val (OriginalSelect.val (); // Добавить Triangle в правом Triangle = = $ ("<div/>"). CSS ({Height: 0, ширина: 0, Borderleft: «5px Solid Transparent», Borderright: «5px Solid Transparent», Bordertop: «7px solid #999», «Положение:« Относительно », Top:-(inputectect.height ()/2) -5, левое: inputelect.widTh-als-1, wintpadMpect-1: "-7px", PointerEvents: "none"}). INSRETAFTER (inputSelect); // Создать выбираемый список, который появится, когда ввод получает фокус // При фокусировке добавьте раскрывающуюся поле <ol> <ol/> var selectlist = $ ("<ol/>"). inputSelect.outerWidth ()-2, Padding: 0, Margin: 0, Border: «Solid 1px #ccc», Fontfamily: inputselect.css («Fontfamily»), Fontsize: inputselect.css («Fontsize»), фон: «#fff», позиция: «Абсолют», zindex: zindex: zindex: 1000000}). INSRETAFTER (Triangle); // Добавить параметры // хранилище всех данных в текущем раскрывающемся поле в переменной ResourceData // ****** var resourcedata = []; iniginalSelect.children (). Каждый (функция (index, value) {PrepareOption ($ (value) .Text (), warpper); resourceData.push ($ (value) .text ());}); // ******/Свяжите обработчик фокуса // Когда мышь сфокусирована, Fadein (100), то есть выпущенное отображает текущий входной короб. Если входное содержимое не является пустым, данные с символами в V будут найдены во всех данных, хранящихся в исходной раскрывающейся коробке, и прижаты к переменной Newresourcedata // ******* var v = inputelect.val (); var newresourcedata = []; if (v! -1) newresourcedata.push (t);});} warper.children ("ol"). Empty (); $. Каждый (newresourcedata, function (i, t) {prepareoption (t, warper);}); // *******}). Blur (function () {selectlist.fadeout (100); }). Keyup (function (e) {if (e.which == 13) inputselect.trigger ("blur"); // События, выполненные при нажатии клавиши ввода ярлыка // ******* var v = inputelect.val (); var newresourcedata = []; if (v! = "") {$ .e. ! = -1) newresourcedata.push (t);});} warper.children ("ol"). Empty (); $. Каждый (newresourcedata, function (i, t) {prepareoption (t, wrapper);}); // *****}); // hide inerianoriginalselect.cssssss ({visiby: "wiseby:" wisbodeby: "wiseby:" wisbodeby: "wiseby:" wisebipeble: "wisbodeby:" wisebipeble: "wisebipeby:" wisebipeble: "wiseby:" wiseby: "wiseby:" //**** "none"}); // Сохранить этот экземпляр, чтобы вернуть itinstancevar = inputelect} else {// не селектрон false;}}); // - end enly/** public methods ** // *** Добавляет опцию в редактируемое select*@param function (value) {prepareoption (value, exantevvar.parent ()); };/*** Удаляет определенную опцию из редактируемого SELECT* @param {string, number} value - значение или индекс для удаления* @returns {void}*/exantemvar.removeoption = function (value) {switch (value)) {case "Число": exanteVar.parent (). Дети ("ol"). дети (": nth ("+value+")"). remove (); break; case "String": exantevar.parent (). children ("ol"). childous (). Каждый (function (index, optionvalue) {if ($ (optionvalue) .text () == value) {$ (optionvalue) .Remove ();}}); Break;}};/*** Resets to It Origin = function () {var OriginalSelect = exancevAr.parent (). Children ("select"); var objid = exancevar.attr ("id"); exancevar.parent (). перед (OriginalSelect); exancevar.parent (). Remove (); OriginalSelect.css ({visible: "visible", отображать: "inline-block"); objid});}; // возвращать инстанстернтерн Ensagevar;};/** Приватные методы ** ///////////mefareoption функция состоит в том, чтобы добавить новую функцию опции Prepareoption (значение, обертка) {var selectoption = $ ("<li>"+value+"</li>"). Приложение (wrapper.Children ("ol"); warpper.children ("input"); selectoption.css ({padding: "3px", textalign: "left", cursor: "pointer"}). Hover (function () {selectoption.css ({founalcolor: "#eee"});}, function () {selectoption.css ({neaflcolor: "); }); // Привязанность Нажмите на этот опция selectoption.click (function () {inputelect.val (selectOption.text ()); inputelect.trigger ("изменение");}); }} (jQuery));