如何实现select组件的选择输入过滤作用
实现select组件的选择输入过滤作用的js代码如下:
/**
*其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码
**
/
(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 ));
如何实现select组件的选择输入过滤作用的更多相关文章
- vue自定义select组件
1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据, ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- select组件2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- select组件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- freemarker写select组件(一)
freemarker写select组件 1.宏定义 <#macro select id datas> <select id="${id}" name=" ...
- freemarker写select组件报错总结(一)
1.具体错误如下 六月 25, 2014 11:26:29 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template pr ...
- freemarker写select组件(五)
freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...
- freemarker写select组件(四)
freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...
- freemarker写select组件(三)
freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...
随机推荐
- 绿色mysql启动脚本
启动脚本如下:./mysqld_safe --defaults-file=/export/servers/mysql-5.5.38/my.cnf --ledir=/export/servers/mys ...
- Jpa规范中persistence.xml 配置文件解析
使用spring data + hibernate 进行逻辑层操作时候需要配置 persistence.xml的内容 <?xml version="1.0"?> & ...
- Lucene的多线程访问原则和同步,锁机制
本文介绍lucene多线程环境下的使用原则和commit.lock与write.lock实现的锁机制. 设计之初就是服务于多线程环境,大多数情况下索引会被不至一个线程访问.索引时一个关键资源.在对这样 ...
- HDU 5785 Interesting
题目: 大概说给一个字符串,找到其所有子串[i...k]满足它是由两个回文串拼成的,求Σi*k. 分析: 用val[1][i]表示以i结尾的回文串的起始位置的和val[0][i]表示以i起始的回文串的 ...
- Gitlab管理下本地Git配置
公司项目组用的是Gitlab,组内成员分配有有固定的git个人账户,不同成员有不同的模块编辑权限,使用前需要配置好本地的Git.对一直使用svn的小菜菜来说,这个还是需要一点步骤配置下才可以使用的.配 ...
- C# for循环 迭代法 穷举法应用
迭代 //兔子生兔子 class Class5 { static void Main(string[] args) { int tu1 = 1, tu2 = 1; //tu1是倒数第一个月的兔子 ...
- JBOSS javax.naming.NameNotFoundException: xxx not bound
当出现JOBSS部署EJB xxx not bound 请查看ejb.jar 是否打包完全正常,是不是缺配置文件,一般是缺少配置文件或者打包不正确.
- [jQuery] jQuery如何获取同一个类标签的所有的值
碰巧在开发的时候遇到这个问题,因为jQuery总是只返回第一个类标签的值,所以无法达到我们的要求. 比如: var btn = jQuery('.btn').val(); 获取的只是第一个类标签为bt ...
- [Backbone.js]如何用backbone写一个仿网页版微信的webapp?
var Chat = Backbone.Model.extend({ idAttribute:'id', initialize:function(options){ var users = this. ...
- 开源代码——Crouton
开源代码——Crouton 一个可随意定位置的带色Toast——开源代码Crouton的简单使用 今天在公司要求的代码中,要求显示的提示能够更加具有多样化,而不是简单的Toast字样,第一想法肯定 ...