選択コンポーネントの選択入力フィルタリング関数を実装するJSコードは次のとおりです。
/*** // ******の間の部分は、入力フィルタリング機能を選択しないコードに追加された関数コードを示していますAttribution-noncommercial 3.0 Unported（CC by-nc 3.0）* @license @license comercial使用：martin.mende（at）aristech.de** @requires jquery 1.9+** @class editableselect* @class editableselect* @mamberof jquery.fn ** @ @例selectbox.addoption（ "私は動的に追加されます"）;*/（function（$）{$ .fn.editableselect = function（）{var instancevar; // this.each（）は現在のオブジェクトのトラバーサルを指します。 $（this）; //要素がselectif（originalalSelect [0] .tagname.touppercase（）=== "select"）{//元の選択<div> </div> boxを挿入する元の<select> riginalelect.wrap（$（ "<div/>>>"）; var rapper = var rapper = var rapper = var rapper OriginalSelect.Parent（）; wrapper.css（{display： "inline-block"}）; //編集可能な選択を表す入力//選択メニューに入力ボックスを追加します<入力altタイトル<""> var inputselect = $（ "<input/>"）。 OriginalSelect.Removeattr（ "id"）; //元の選択から属性を追加//入力ボックスinputselect.attrのさまざまな属性を設定します（{alt：ortionalalselect.attr（ "alt"）、title：originalaleSelect.attr（ "title"）、class：class：classablead "）、nage：overyalecttr.attr.attr.t、" "）、"） OriginalAlSelect.attr（ "Disabled"）、tabindex：originalalselect.attr（ "tabindex"）、id：objid}）; // selectvar rightpadding = 15; inputselect.css（{width：width：originalalselect.width（） - rightpadding、height：height.height（ OriginalSelect.css（ "fontfamily"）、fontsize：originalalselect.css（ "fontsize"）、background：originalalselect.css（ "background"）、paddingright：rightpadding}）; inputselect.val（originalselect.val（））;幅：0、borderleft： "5px solid透明"、borderright： "5px solid透過"、bordertop： "7px solid＃999"、position： "relative"、top： - （inputselect.height（）/2）-5、左：inputselect.width（）+rightpadding-10、massimbottom： "none"}） 1px #ccc "、fontfamily：inputselect.css（" fontfamily "）、fontsize：inputselect.css（" fontsize "）、background：" #fff "、position：" absolute "、zindex：1000000}）。 resourcedata = []; originalalselect.children（）。各（function（index、value）{prepareoption（$（value）.text（）、wrapper）; resourcedata.push（$（value）.text（））;}）; inputSelect.focus（function（）{selectlist.fadein（100）; // v入力入力ボックスに入力されたコンテンツを保存します。入力コンテンツが空でない場合、Vの文字を含むデータは、元のドロップダウンボックスに保存され、NewResourcedata変数に押し込まれているすべてのデータに表示されます// -1）newResourcedata.push（t）;}）;} wrapper.children（ "ol"）。empty（）; $。各（newResourcedata、function（i、t）{prepareoption（t、wrapper）;}）; // *******}）。 }）。keyup（function（e）{if（e.which == 13）inputSelect.trigger（ "Blur"）; // Enterショートカットキーが押されたときに実行されるイベント// ********* var v = inputSelect.val（）; var newResourcedata = []; if（v！= ""）{$。 -1）newResourcedata.push（t）;}）;} wrapper.children（ "ol"）。empty（）; $。$。 "none"}）; //このインスタンスを保存してitinstancevar = inputSelect} else {// selectreturn false;}}）; // -end end ext ext exped ** // *** function（value）{prepareoption（value、instancevar.parent（））; };/*** editable select* @param {string、number} valueから特定のオプションを削除します - 削除する値またはインデックス* @returns {void}*/instancevar.removeoption = function（value）{switch（typeof））{case "number"：instancevar.parent（）。子供（ "ol"）。子供（ "：nth（"+value+"）"）。remove（）; break; case "string"：instancevar.parent（）。children（ "ol"）。fluction（index、optionValue）{if（$（optionValue）.text（）== value）{$（optionValue）.remove（）;}}）; break;}} function（）{var originalselect = instancevar.parent（）。children（ "select"）; var objid = instancevar.attr（ "id"）; instancevar.parent（）。before（originalalselect）; instancevar.parent（）; remove（）。 "inline-block"}）; originalalSelect.attr（{id：objid}）;}; // Instancereturn instancevar;};/** private method ** //// prepareoption関数は、新しいオプション機能を追加することです。 $（ "<li>"+value+"</li>"） "#eee"}）;}、function（）{selectoption.css（{backgroundcolor： "#fff"}）; }）; // bindこのoptionselectoption.clickをクリックします（function（）{inputselect.val（selectoption.text（））; inputselect.trigger（ "change"）;}）; }}（jQuery））;