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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Rust中的Struct使用示例详解
Aug 14 Javascript
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 缓存函数代码
2008/08/27 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
javascript表单正则应用
2017/02/04 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python实现计算最小编辑距离
2016/03/17 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
有关打架的检讨书
2014/01/25 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
监守自盗观后感
2015/06/10 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang