선택 구성 요소의 선택 입력 필터링 기능을 구현하는 JS 코드는 다음과 같습니다.
// ****** 사이의 부품은 입력 필터링 함수를 선택하지 않는 코드에 추가 된 기능 코드를 보여줍니다. ** // ***@Description이 플러그인은 텍스트 상자와 같이 텍스트 상자와 같은 선택 상자를 편집 할 수있게하는 동안*@Description No Stylesheets 또는 이미지가 필요하지 않습니다. Attribution-NONCOMMERCIAL 3.0 UNPORTED (CC BY-NC 3.0)* @LICERCENS Comercial 사용에 연락하십시오 : Martin.mende (at) Aristech.de** @Requires jQuery 1.9+** @Class EditablesElect* @Memberof jquery.fn ** @exampe = $ ( "select"); SelectBox.AdDoption ( "I Dynamically Added");*/(function ($) {$ .fn.editableseLect = function () {var instancevar; // this.each ()는 현재 객체의 횡단을 나타냅니다. selectif (AriginalSelect [0] .tagname.toupperCase () === "select") {// 원래 <select.wrap ( "<div/>")의 원래 <select> inserts inserts <div> </div> 상자를 삽입합니다. "Inline-Block"}); // 편집 가능한 선택을 나타내는 입력을 배치합니다. // 선택 메뉴에서 입력 입력 상자를 추가하십시오 <입력 alt 제목 ..... ""> var inputSelect = $ ( "<input/>"). InsertBefore (OriginalSelect); // 원래 idvar objid = OriginalSelect.attr ( "id"); OriginalSelect.removeattr ( "id"); // 원래 선택 // 입력 입력 상자의 다양한 속성을 설정하여 입력 상자 inputselect.attr ({alt : ortor alteLect.attr ( "alt"), title : ortheSelect.attr ( "title"), class : orignalSelect ( "classe"), 이름 "), 이름": OriginalSelect.attr ( "disabled"), tabindex : AriginalSelect.attr ( "tabindex"), id : objid}); // selectVar RightPadding = 15에서 편집 가능한 CSS 속성을 가져옵니다. OriginalSelect.css ( "fontfamily"), fontsize : AriginalSelect.css ( "fontsize"), 배경 : AriginalSelect.css ( "background"), paddingright : rightpadding}); inputselect.val (AriginalSelect.val ()); // rightvar triangle = traangle을 추가하십시오. $ ( "<div/>"). css ({높이 : 0, 너비 : 0, Borderleft : "5px Solid Transparent", Borderright : "5px Solid Transparent", Bordertop : "7PX Solid #999", 위치 : "상대", 상단 : (입력 선택 .Height ()/2) -5, LEFT : inputselect.width ()+rightPadding-10, marginbottom : "-7px", pointerevents : "none"}). insertAfter (inputSelect); // 입력이 초점을 맞출 때 나타날 나타나는 선택 가능한 목록을 만질 때 <OL> <ol/> 드롭 다운 상자 var selectList = $ ( "<ol/"). "none", liststyletype : "none", width : inputselect.outerwidth () -2, 패딩 : 0, 마진 : 0, 테두리 : "solid 1px #ccc", fontfamily : inputselect.css ( "fontfamily"), fontsize (inputselect.csss) "절대", Zindex : 100000}). insertAfter (삼각형); // 옵션 추가 // resourcedata 변수의 현재 드롭 다운 상자에 모든 데이터를 저장하십시오. // ******** var resourcedata = []; OriginalSelect.children (). rapper); resourcedata.push ($ (value) .text ());}); // ******/초점 핸들러 // 마우스가 초점을 맞추면 fadein (100), 즉 풀다운은 현재 드롭 다운 상자 입력 select.focus (function () {selectlist.fadein (100); 입력 내용이 비어 있지 않으면 V의 문자가있는 데이터는 원래 드롭 다운 상자에 저장된 모든 데이터에서 찾을 수 있으며 NewResourcedata 변수 // ******* v var v = inputselect.val (); var newresourcedata = []; if (v! = ") {$ .Each (if (i, t) {t. indexof (v)) {if (v! =") {$. -1) newResourcedata.push (t);});} wrapper.children ( "ol"). empty (); $. 각 (newresourcedata, function (i, t) {repartion (t, wrapper);}); // *********}). }). keyup (function (e) {if (e.which == 13) inputSelect.trigger ( "blur"); // Enter Enter Key가 누르면 실행 된 이벤트 // ********* var v = inputSelect.val (); var newresourcedata = []; if (v! = "") {$ .ach (i, if (t)) ! = -1) newResourcedata.push (t);});} wrapper.children ( "ol"). empty (); $. 각 (newresourcedata, function (i, t) {repayoption (t, 래퍼);}); // original elementoriginalselect.css는 (hiddden ", "none"}); // // itinstancevar = inputSelect} else {// selectreturn false;}}); // - 각/** 공개 메소드를 끝내기 위해이 인스턴스를 저장하십시오 ** 공개 메소드 ** // *** 편집 가능한 select*@param {string} value- 옵션* @instase void*/instast void}*/astivar.addoption =/addoption =/adovar.addoption에 옵션을 추가합니다. 함수 (value) {prepartion (value, instanceVar.parent ()); };/*** 편집 가능한 select* @param {string, number} 값에서 특정 옵션을 제거합니다 - 값 또는 void}*/instancevar.removeOption = function (value)) {case를 삭제하는 값 또는 색인 "number": instancevar.parent (). children ( "ol"). children ( ": nth ("+value+")"). remove (); break; case "string": instancevar.parent (). children ( "ol"). children (). 각 (). 각 (함수 (index, 옵션 value) {if (if ($ (옵션 value) .text () == value) {$ (옵션 value); remove ();}); break;}}; {void}*/instancevar.restoreSelect = function () {var onstalalSelect = instancevar.parent (). chids ( "select"); var objid = instancevar.attr ( "id"); instancevar.parent (). "Inline-Block"}); AriginalSelect.attr ({id : objid});}; // InstancerEturn instancevar;};/** 개인 메소드 ** /// 준비 기능은 새로운 옵션 기능 준비 (값, 래퍼) {var selectOption = $ ( "<li>"+value+"</li>"). Appendto (wrapper.children ( "ol")); var inputSelect = wrapper.children ( "input"); selectOption.css ({padding : "3px", "왼쪽", 커서 : "pointer"). "#eee"});}, function () {selectOption.css ({backgroundColor : "#fff"}); }); //이 옵션을 클릭하여 클릭하십시오. }} (jQuery));