jQuery插件datalist实现很好看的input下拉列表
HTML5中定义了一种input框很好看的下拉列表--datalist，然而目前它的支持性并不好(万恶的IE，好在你要渐渐退役了...)。于是最近更据需求写了一个小型datalist插件，兼容到IE8(IE7应该没多少人用了吧？)。实现的具体需求如下:
当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦)，单击鼠标左键或者enter键将选中的列表的值输入到input框。
具体的实现代码如下：
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="author" content="codetker" />
<title> 表单选中弹出框</title>
<link href="css/reset.css" type="text/css" rel="Stylesheet" />
<link href="css/master.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>
<body>
<div class="wrap">
<form class="center">
<div class="input_wrap">
<input name="input1" class="input input1" type="text"/>
<ul class="input1_ul select_list">
<li>问题1</li>
<li>问题2</li>
<li>问题3</li>
<li>问题4</li>
<li>问题5</li>
</ul>
</div>
</form>
</div>
<script type="text/javascript" src="js/jquery.codetker.datalist.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".input_wrap").myDatalist({"bgcolor":"red","widths":1,"heights":1});
});
</script>
</body>
</html>
CSS(reset.css里面是初始化浏览器默认值用的，这里是style.css)
.wrap{ margin:0 auto; font-family: "微软雅黑";font-size: 14px;}
.center{ margin: 0 auto; width:500px;}
.input{ margin: 0; padding: 0; /*border:none;*/ width:140px; height: 24px; float:left;}
.select_list{display: none; position:absolute; z-index: 100;}
.select_list li{ height:24px; margin: 0; padding: 0; background-color: #fff; cursor: pointer; list-style: none; position:relative;}
.select_list li:hover{ background-color: red;}
.input_wrap{ position:relative; }
JavaScript
/*
datalist 0.1
自定义datalist插件，实现html5中input元素datalist的效果
兼容IE8+,Firefox,Chrome等常见浏览器
*/
;(function($,window,document,undefined){ //undefinde是真实的undefined，并非参数
//将可选择的变量传递给方法
//定义构造函数
var Datalist=function(ele,opt){
this.$element=ele;
this.defaults={
'bgcolor':'green',
'widths':1,
'heights':1
},
this.options=$.extend({}, this.defaults, opt);
}
//定义方法
Datalist.prototype={
showList:function(){
var color=this.options.bgcolor;
var width=this.options.widths;
var height=this.options.heights; //属性值
var obj=this.$element; //obj为最外层包裹的div之类的元素，应该拥有positive：relative属性,方便datalist定位。
var input=$(obj).children().eq(0); //input元素
var inputUl=$(obj).children().eq(1); //datalist元素
//设置弹出datalist的大小和样式
$(inputUl).css({
"top":$(input).outerHeight()+"px",
"width":$(input).outerWidth()*width+"px"
});
$(inputUl).children().css({
"width":$(input).outerWidth()*width+"px",
"height":$(input).outerHeight()*height+"px"
});
$(inputUl).children('li').mouseover(function() {
$(this).css("background-color",color);
$(this).siblings().css("background-color","#fff");
});
$(inputUl).children('li').mouseout(function() {
$(this).css("background-color","#fff");
});
//再次focus变为空，也可以改为某个默认值
//datalist的显示和隐藏
$(input).focus(function() {
if($(this).val()!=""){
$(this).val("");
}
$(inputUl).slideDown(500);
var n=-1; //记录位置,-1表示未选中。当n=-1时直接按enter浏览器默认为倒数第一个
$(document).keydown(function(event) {
/* 点击键盘上下键，datalist变化 */
stopDefaultAndBubble(event);
if(event.keyCode==38){//向上按钮
if(n==0||n==-1){
n=4;
}else{
n--;
}
$(inputUl).children('li').eq(n).siblings().mouseout();
$(inputUl).children('li').eq(n).mouseover();
}else if(event.keyCode==40){//向上按钮
if(n==4){
n=0;
}else{
n++;
}
$(inputUl).children('li').eq(n).siblings().mouseout();
$(inputUl).children('li').eq(n).mouseover();
}else if(event.keyCode==13){//enter键
$(inputUl).children('li').eq(n).mouseout();
$(input).val( $(inputUl).children('li').eq(n).text() );
n=-1;
}
});
//去掉浏览器默认
function stopDefaultAndBubble(e){
e=e||window.event;
//阻止默认行为
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue=false;
//阻止冒泡
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble=true;
}
});
$(input).blur(function() {
$(inputUl).slideUp(500);
});
$(inputUl).delegate('li', 'click', function() {
$(input).val( $(this).text() );
});
return this;
}
}
//在插件中使用Datalist对象
$.fn.myDatalist=function(options){
//创建实体
var datalist=new Datalist(this,options);
//调用其方法
return datalist.showList();
}
})(jQuery,window,document);
这里用ul li列表模拟datalist options。实现逻辑非常简单，稍微需要注意点的是div.input_wrap是用相对定位的，方便ul.input1_ul相对进行定位。由于需求有很多的输入框且相互之间不影响，因此这里是input1。好歹是我自己开发的第一个插件，mark一记。
需要代码的可以戳https://github.com/codetker/myDatalist。
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--
-
jQuery三级下拉列表导航菜单代码分享
本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta
-
jquery+css实现下拉列表功能
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>fruit</title> <style type="text/css"> .hide { display: none; } div { float: left; width: 100%; } .selector
-
jQuery实现在下拉列表选择时获取json数据的方法
本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e
-
jQuery实现输入框下拉列表树插件特效代码分享
本文实例讲述了jQuery实现输入框下拉列表树插件.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的下拉列表树插件源码,是一款实用的jquery 树形下拉框下拉树代码.点击文本框即可弹出树形下拉列表,单击列表项即可选中列表对应文字,是一款非常实用的特效源码. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQ
-
jQuery插件datalist实现很好看的input下拉列表
HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8(IE7应该没多少人用了吧?).实现的具体需求如下: 当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦),单击鼠标左键或者enter键将选中的列表的值输入到input框. 具体的实现代码如下:
-
海量经典的jQuery插件集合
海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面. 其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们. 猫嗔提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题.并且其中英文插件在转换成中文时注意编码,推荐utf-8. jQuery插件-文件上传(File upload)Ajax File Upload.jQU
-
10分钟学会写Jquery插件实例教程
有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下: 具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍. 现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正
-
jQuery插件扩展extend的简单实现原理
相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {
-
jQuery插件原来如此简单 jQuery插件的机制及实战
jQuery插件的种类 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如parent()方法,appendTo()方法等. 2.封装全局函数 可以将独立的函数加到jQuery命名空间下.如常用的jQuery.ajax()方法.去首尾空格的jQuery.trim()方法,都是jQ
-
合并table相同单元格的jquery插件分享(很精简)
效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ
-
分享20个提升网站界面体验的jQuery插件
jQuery到目前为止还是非常流行,很多用户喜欢使用jQuery插件加进自己的网站上提升界面及交互性能,这是好的,但我发现很多网站使用的插件还是比较旧,而这点就不太好了,是应该要换换"新款"啦! 随便Web技术不停的进步,很多新鲜.创新并且实用的jQuery插件已经开发出来,大家应该多点关注这方面的资讯. 今天为大家整理20个提升网站界面的体验的jQuery插件,这些都是比较"新款"的代码,喜欢的请用到你的网站项目上吧! Card 友好的信用卡表单插件,模拟真实的信
-
jQuery插件实现可输入和自动匹配的下拉框
实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签<datalist>,对应demo如下: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option val
-
jQuery插件artDialog.js使用与关闭方法示例
本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t
-
自己动手制作jquery插件之自动添加删除行功能介绍
这是一个我认为功能基本完善的插件,它包括添加.删除.插入.上下移动.索引标识. 数量控制等功能,基本上能满足大部分多行添加的需求,当然,在完成这些功能的前提下,我也尽量保持较少的代码量和易理解的逻辑性. 这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ,引用自己动手制作jquery插件之自动添加删除行(上)里的介绍,这是一个简单的插件,它的作用是:一个系统中有大量的需要对一个行进行复制添加,希望能够进行批量的操作时,