js实现select组件的选择输入过滤代码
2014-10-14 00:00
891 查看
实现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()指的就是对当前对象的遍历,这里的当前对象指代的就是对当前两个下拉选择框对象的一一遍历 this.each(function(){ var originalSelect = $(this); //check if element is a select if(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 id var objID = originalSelect.attr("id"); originalSelect.removeAttr("id"); //add the attributes from the original select //input输入框的各种属性设置 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 select var 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 right var 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变量中存储当前下拉框中的所有数据 //****** var resourceData = []; originalSelect.children().each(function(index, value){ prepareOption($(value).text(), wrapper); resourceData.push($(value).text()); }); //****** //bind the focus handler //在鼠标聚焦的时候fadeIn(100),即下拉显示当前下拉框 inputSelect.focus(function(){ selectList.fadeIn(100); //v存储的是在input输入框中输入的内容,如果输入的内容不为空,就在存储原始下拉框的所有数据中找到出现v中字符的数据压入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快捷键按下后弹起的时候执行的事件 //****** 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 element originalSelect.css({visibility: "hidden", display: "none"}); //save this instance to return it instanceVar = inputSelect }else{ //not a select return 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 instance return instanceVar; }; /** private methods **/ //prepareOption函数的作用就是在当前下拉框中添加新选项 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 option selectOption.click(function(){ inputSelect.val(selectOption.text()); inputSelect.trigger("change"); }); } }( jQuery ));
相关文章推荐
- js实现select组件的选择输入过滤代码
- 如何实现select组件的选择输入过滤作用
- js实现Select头像选择实时预览代码
- vue.js实现仿原生ios时间选择组件实例代码
- js实现Select头像选择实时预览代码
- select下拉选择框美化实现代码(js+css+图片)
- js实现可输入可选择的select下拉框
- js模拟权限选择实现代码(select操作)
- js模拟权限选择实现代码(select操作)
- select下拉选择框美化实现代码(js+css+图片)
- js模拟权限选择实现代码(select操作)
- 左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)
- js用正则表达式控制价格输入实现代码
- 输入密码检测大写是否锁定js实现代码
- JS 无限级 Select效果实现代码(json格式)
- 简单实用的js调试logger组件实现代码
- JS正则表达式----控制价格输入实现代码
- JS控制输入框只输入数字类型与文件域只能选择文件的JS实现
- JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
- js删除select中重复项的实现代码