js实现select组件的选择输入过滤代码


Posted in Javascript onOctober 14, 2014

实现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 ));
Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
javascript记录文本框内文字个数检测文字个数变化
Oct 14 #Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 #Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 #Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 #Javascript
js解决select下拉选不中问题
Oct 14 #Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 #Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 #Javascript
You might like
php实现图片添加水印功能
2014/02/13 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python3实现名片管理系统
2020/11/29 Python
简单了解python元组tuple相关原理
2019/12/02 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
面试后的感谢信范文
2014/02/01 职场文书
如何写自我鉴定
2014/03/19 职场文书
文化活动实施方案
2014/03/28 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
欠款证明
2015/06/24 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android