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 相关文章推荐
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
老生常谈的跨域处理
Jan 11 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 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/07/13 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP生成随机密码类分享
2014/06/25 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
Javascript this指针
2009/07/30 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Python实现队列的方法
2015/05/26 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python 文件操作的详解及实例
2017/09/18 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
八年级英语教学反思
2014/01/09 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
师德模范事迹材料
2014/06/03 职场文书
旷课检讨书范文
2014/10/30 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
单位病假条范文
2015/08/17 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle