The js code that implements the selection input filtering function of the select component is as follows:
/***The part between //****** shows the function code added on the code that does not select the input filtering function**//** * @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 this.each() refers to the traversal of the current object. The current object here refers to the traversal of the current two drop-down selection box objects one by one this.each(function(){var originalSelect = $(this);//check if element is a selectif(originalSelect[0].tagName.toUpperCase()==="SELECT"){//wrap the original select inserts the <div></div> box in the original <select> periphery of the original <select> originalSelect.wrap($("<div/>"));var wrapper = originalSelect.parent();wrapper.css({display: "inline-block"});//place an input which will represent the editable select//Add the input input box on the selection menu <input alt title ..... 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//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});//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// When focusing, add the <ol><ol/> drop-down box 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//Storage all data in the current drop-down box in the resourceData variable//******var resourceData = [];originalSelect.children().each(function(index, value){prepareOption($(value).text(), wrapper);resourceData.push($(value).text());});//******/bind the focus handler//When the mouse is focused, fadeIn(100), that is, the pull-down displays the current drop-down box inputSelect.focus(function(){selectList.fadeIn(100);//v stores the content entered in the input input box. If the input content is not empty, the data with the characters in v will be found in all data stored in the original drop-down box and pressed into the newResourceData variable//*******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");// Events executed when the enter shortcut key is pressed//*******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 function is to add a new option 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 ));