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和as的稳定传值问题解决
Jul 14 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
简单的分页代码js实现
May 17 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
canvas实现贪食蛇的实践
Feb 15 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将会员数据导入到ucenter的代码
2010/07/18 PHP
php debug 安装技巧
2011/04/30 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
pycharm安装图文教程
2017/05/02 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
django ajax发送post请求的两种方法
2020/01/05 Python
python机器学习库xgboost的使用
2020/01/20 Python
通过python检测字符串的字母
2020/02/18 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
《卖木雕的少年》教学反思
2014/04/11 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
门市房租房协议书
2014/12/04 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
导游词之阆中古城
2019/12/23 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
python+opencv实现目标跟踪过程
2022/06/21 Python