實現(xiàn)select組件的選擇輸入過濾作用的js代碼如下：

/***其中//******之間的部分顯示的是在沒有選擇輸入過濾功能的代碼上加入的功能代碼**//** * @description This plugin allows you to make a select box editable like a text box while keeping it's select-option features* @description no stylesheets or images are required to run the plugin** @version 0.0.1* @author Martin Mende* @license 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("I am dynamically added");*/(function ( $ ) {$.fn.editableSelect = function() {var instanceVar;//此this.each()指的就是對當(dāng)前對象的遍歷，這里的當(dāng)前對象指代的就是對當(dāng)前兩個下拉選擇框?qū)ο蟮囊灰槐闅vthis.each(function(){var originalSelect = $(this);//check if element is a selectif(originalSelect[0].tagName.toUpperCase()==="SELECT"){//wrap the original select在原始的<select>外圍插入<div></div>框originalSelect.wrap($("<div/>"));var wrapper = originalSelect.parent();wrapper.css({display: "inline-block"});//place an input which will represent the editable select//在選擇菜單上加入input輸入框<input alt title ..... style="width:......" value="">var inputSelect = $("<input/>").insertBefore(originalSelect);//get and remove the original idvar objID = originalSelect.attr("id");originalSelect.removeAttr("id");//add the attributes from the original select//input輸入框的各種屬性設(shè)置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});//get the editable css properties from the selectvar rightPadding = 15;inputSelect.css({width: originalSelect.width()-rightPadding,height: originalSelect.height(),fontFamily: originalSelect.css("fontFamily"),fontSize: originalSelect.css("fontSize"),background: originalSelect.css("background"),paddingRight: rightPadding});inputSelect.val(originalSelect.val());//add the triangle at the rightvar triangle = $("<div/>").css({height: 0, width: 0,borderLeft: "5px solid transparent",borderRight: "5px solid transparent", borderTop: "7px solid #999",position: "relative",top: -(inputSelect.height()/2)-5,left: inputSelect.width()+rightPadding-10,marginBottom: "-7px",pointerEvents: "none"}).insertAfter(inputSelect);//create the selectable list that will appear when the input gets focus//聚焦的時候加上<ol><ol/>下拉框var selectList = $("<ol/>").css({display: "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);//add options//在resourceData變量中存儲當(dāng)前下拉框中的所有數(shù)據(jù)//******var resourceData = [];originalSelect.children().each(function(index, value){prepareOption($(value).text(), wrapper);resourceData.push($(value).text());});//******//bind the focus handler//在鼠標(biāo)聚焦的時候fadeIn（100），即下拉顯示當(dāng)前下拉框inputSelect.focus(function(){selectList.fadeIn(100);//v存儲的是在input輸入框中輸入的內(nèi)容，如果輸入的內(nèi)容不為空，就在存儲原始下拉框的所有數(shù)據(jù)中找到出現(xiàn)v中字符的數(shù)據(jù)壓入newResourceData變量中//******var v = inputSelect.val();var newResourceData = [];if(v != "") {$.each(resourceData, function(i, t){if(t.indexOf(v) != -1)newResourceData.push(t);});}wrapper.children("ol").empty();$.each(newResourceData, function(i, t){prepareOption(t, wrapper);});//******}).blur(function(){selectList.fadeOut(100); }).keyup(function(e){if(e.which==13) inputSelect.trigger("blur");//在enter快捷鍵按下后彈起的時候執(zhí)行的事件//******var v = inputSelect.val();var newResourceData = [];if(v != "") {$.each(resourceData, function(i, t){if(t.indexOf(v) != -1)newResourceData.push(t);});}wrapper.children("ol").empty();$.each(newResourceData, function(i, t){prepareOption(t, wrapper);});//******});//hide original elementoriginalSelect.css({visibility: "hidden", display: "none"});//save this instance to return itinstanceVar = inputSelect}else{//not a selectreturn false;}});//-end each/** public methods **//*** Adds an option to the editable select* @param {String} value - the options value* @returns {void}*/instanceVar.addOption = function(value){prepareOption(value, instanceVar.parent()); };/*** Removes a specific option from the editable select* @param {String, Number} value - the value or the index to delete* @returns {void}*/instanceVar.removeOption = function(value){switch(typeof(value)){case "number":instanceVar.parent().children("ol").children(":nth("+value+")").remove();break; case "string":instanceVar.parent().children("ol").children().each(function(index, optionValue){if($(optionValue).text()==value){$(optionValue).remove();}});break;} };/*** Resets the select to it's original* @returns {void}*/instanceVar.restoreSelect = function(){var originalSelect = instanceVar.parent().children("select");var objID = instanceVar.attr("id");instanceVar.parent().before(originalSelect);instanceVar.parent().remove();originalSelect.css({visibility: "visible", display: "inline-block"});originalSelect.attr({id: objID});};//return the instancereturn instanceVar;};/** private methods **///prepareOption函數(shù)的作用就是在當(dāng)前下拉框中添加新選項function prepareOption(value, wrapper){var selectOption = $("<li>"+value+"</li>").appendTo(wrapper.children("ol"));var inputSelect = wrapper.children("input");selectOption.css({padding: "3px",textAlign: "left",cursor: "pointer" }).hover(function(){selectOption.css({backgroundColor: "#eee"});},function(){selectOption.css({backgroundColor: "#fff"}); });//bind click on this optionselectOption.click(function(){inputSelect.val(selectOption.text());inputSelect.trigger("change");}); }}( jQuery ));

JavaScript技術(shù)：js實現(xiàn)select組件的選擇輸入過濾代碼，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。