左图是用keydown事件写的动态过滤填充input框
$(document).ready(function(){
$("input.click").click(function(){$("ul").hide();});
$("input.click").keydown(function(index){
position(this);
$("ul").show();
$("ul li").each(function(){
hoverEvent(this);
$(this).click(function(){
$("input.click").val("");
textLi = $(this).text();
$("ul").hide();
$("input.click").val(textLi);
});
});
});
});
右图是用弹出层替换select框
$(document).ready(function(){
$("div.click").click(function(index){
position(this);
$("ul li:first").addClass("active");
$("ul li").each(function(){
if($("div.click span.text").text() == $(this).text()){
$("ul li").removeClass("active");
$(this).addClass("active");
}
hoverEvent(this);
$(this).click(function(){
$("div.click span.text").text("");
textLi = $(this).text();
$("ul").hide();
$("div.click span.text").text(textLi);
});
});
});
});
通用的方法
//弹出框定位
function position(obj){
var leftMargin = $(obj).offset().left;
var topMargin = $(obj).offset().top;
leftMarginPX = leftMargin + "px";
topMarginPX = (topMargin + 25) + "px";
$("ul").css({left:leftMarginPX,top:topMarginPX});
}
//鼠标hover高亮
function hoverEvent(obj){
$(obj).hover(
function(){
$(obj).addClass("active");
},
function(){
$(obj).removeClass("active");
}
);
}
//上下键切换行
var currentLine = -1;
$(document).keydown(function(e){
if(e.keyCode == 38){
currentLine--;
changeItem();
}
else if(e.keyCode == 40){
currentLine++;
changeItem();
}
});
function changeItem(){
$("ul li").removeClass("active");
var lengthNum = $("ul").children("li").length;
if(currentLine < 0){
currentLine = lengthNum - 1;
}
if(currentLine == lengthNum){
currentLine = 0;
}
$("ul li:nth-child("+(currentLine+1)+")").addClass("active");
}
- 大小: 74.5 KB
分享到:
相关推荐
动态的填充列表框和组合框
jQGrid动态填充select下拉框的选项值(动态填充)
清除input在浏览器中自动填充用户名等的情况,JQuery解决,IE8 ,chrome等均可以使用。
CSS语法手册(三)文本填充,边框,边界和位置属性(一).pdfCSS语法手册(三)文本填充,边框,边界和位置属性(一).pdfCSS语法手册(三)文本填充,边框,边界和位置属性(一).pdfCSS语法手册(三)文本填充,边框,边界和位置属性(一)...
SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 好东东
填充树型框(1.0)
易语言支持库填充树型框模块源码,支持库填充树型框模块,填充树型框
jquery自动填充搜索框是一款基于jquery css3实现的自动完成库搜索框特效。 jquery自动填充搜索框演示图: 点击查看演示:
资源介绍:可以根据需要添加树型框的总根节点 * 对易语言所支持的全部数据库都能进行填充 * 调用本模块之前,必须将数据库转换为二维数组,记录数作为数组的行, 填充的字段作为数组的列,填充源数组[记录数][填充...
以生成工资条为例,演示了通过PageOffice开发平台,用Java语言实现Word文档的在线打开、编辑和保存,数据区域数据的动态填充和提交,数据区域插入Word文件,动态填充和提交Word文件中Tabel的数据
js 实现 代码 自动填充 可以自己连库 可以实现的。
易语言填充树型框模块源码,填充树型框模块
ADO方式填充树型框.rar
易语言通用填充树型框模块源码,通用填充树型框模块,填充树型框,快速填充树型框,数组填充树型框
第一种方法回调无法操作,填充等其他消息可以。第二种支持回调,比第一种好。@何故。
一次性填充树型框.rar 一次性填充树型框.rar 一次性填充树型框.rar 一次性填充树型框.rar 一次性填充树型框.rar 一次性填充树型框.rar
因为项目需要用到pdf模板生成pdf,其中模板中有图片,找了好久没有资料,无奈之下翻看api和源码,给大家分享下
动态生成SELECT选项演示大全 可以研究
易语言模块ODBC方式填充树型框.rar 易语言模块ODBC方式填充树型框.rar 易语言模块ODBC方式填充树型框.rar 易语言模块ODBC方式填充树型框.rar 易语言模块ODBC方式填充树型框.rar 易语言模块ODBC方式填充树型框....