原本项目里是用h5的新属性data-list,但是这个下拉框的数据太多,而data-list似乎没有设置高度的地方,所以写了个小插件,期间也发现了一些bug,目前这个版本算是可以一用的版本,故写一下这个插件碰到的奇怪问题。

一点简单的CSS(因为项目原因,暂时只写了webkit内核)。

.datalist_ul {
background: #fff;
display: none;
list-style: none;
padding: 0;
margin: 0;
overflow: auto;
position: absolute;
} .datalist_ul .datalist_li {
background: transparent;
color: #000;
padding: 0.5em 0.5em;
text-align: left;
font-size: 1.2em;
border-bottom: 0.1em dashed cornflowerblue;
box-sizing: border-box;
} .datalist_ul .datalist_li_hover {
background: rgba(100, 149, 237,0.8);
color: #fff;
} .detalist_ul .datalist_li_hide {
display: none;
} body {
margin: 0;
padding: 0;
} input {
height: 2em;
padding:0 0.5em;
box-sizing: border-box;
width:180px;
} ::-webkit-scrollbar {
width: 0.5em;
}
/*
::-webkit-scrollbar-button{
height:0.5em;
width:0.5em;
background:#ccc;
}*/ ::-webkit-scrollbar:horizontal {
height: 0.2em;
} ::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
} ::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
} ::-webkit-scrollbar-thumb:window-inactive {
background: rgba(169, 169, 169, 0.4);
}

js代码

(function ($) {
$.fn.extend({
datalist: function (options, func) {
var ul, cur, count = 0, css, hover, visible, scroll;
$(".datalist_li").hover(
function () {
$(".datalist_li").removeClass("datalist_li_hover");
$(this).addClass("datalist_li_hover");
count = $(this).index();
}, function () {
$(this).removeClass("datalist_li_hover");
}
);
$("[data-list]").on({
"click focus": function () {
cur = $(this);
ul = $("[data-list-id='" + cur.attr("id") + "']").eq(0);
console.log(ul);
if (!!ul) {
css = {
"top": cur.css("height"),
"left": cur.position().left + "px",
"display": "block",
"width": cur.css("width")
};
!!options && (css = $.extend(css, options));
//ul.show().css(css);
for (var i in css) {
ul[0].style[i] = css[i];
}
}
},
"keyup": function (e) {
ul.show();
hover = ul.find(".datalist_li_hover");
visible = ul.find(".datalist_li:visible");
switch (e.keyCode) {
case 13:
if (hover.length > 0) {
cur.val(hover.text());
ul.hide().find(".datalist_li").removeClass("datalist_li_hover");
}
!!func && func();
break;
case 38:
if (hover.index() == 0) {
count = visible.length;
}
if (hover.length > 0) {
count--;
visible.removeClass("datalist_li_hover");
visible.eq(count).addClass("datalist_li_hover");
} else {
count = visible.length - 1;
visible.eq(count).addClass("datalist_li_hover");
}
break;
case 40:
if (count == visible.length - 1) {
count = -1;
}
if (hover.length > 0) {
count++;
visible.removeClass("datalist_li_hover");
visible.eq(count).addClass("datalist_li_hover");
} else {
count = 0;
visible.eq(0).addClass("datalist_li_hover");
}
break;
default:
ul.find(".datalist_li").hide().removeClass("datalist_li_hover").each(function () {
if ($(this).text().indexOf(cur.val()) >= 0 || $(this).text() == cur.val()) {
$(this).show();
}
});
}
},
"blur": function () {
hover = ul.find(".datalist_li_hover");
if (hover.length != 0) {
cur.val(hover.text());
cur.attr("value", hover.text());
ul.find(".datalist_li").each(function () {
$(this).removeClass("datalist_li_hover");
});
ul.hide();
count = 0;
!!func && func(hover);
} else {
ul.hide();
}
}
});
}
})
})(jQuery);

总体来说代码难度不大,碰到最奇怪的问题就是 //ul.show().css(css);这一行被注释的代码,原本也是用这一行代码的,但是在项目里碰到这样一个问题,页面第一次加载页面时,这一行代码是不会报错的,选择完之后提交数据,后台java render一个新页面把body内容替换(也把datalist替换了),再次给这个框绑定data-list方法,然后点击这个datalist框时这一句话就报了cannot read property ' style' of undefined,我之前怀疑这不是一个jquery对象,但是用$()把ul包起来也不行,而且console.log时它确实是一个jquery对象,而且length也为1并没用重复的对象,但是jquery内部似乎就是识别不了,亦或者这个对象和真正的jquery对象有区别?反正最后换成了原生JS才可以解决,各位大神如果有解决方法或是知道问题原因请务必在评论下方指导小弟一二。

html代码 调用代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/datalist.css">
<script src="js/jquery1.8.js"></script>
<script src="js/datalist.js"></script>
<script type="text/javascript">
$(function () {
$('[data-list-id="datalist"]').datalist({
"max-height": "15em"
}, function () {
console.log("callback function");
});
});
</script>
</head>
<body>
<div>
<label for="datalist">select url</label>
<input id="datalist" type="text" data-list>
<ul class="datalist_ul" data-list-id="datalist">
<li class="datalist_li">google</li>
<li class="datalist_li">facebook</li>
<li class="datalist_li">twitch</li>
<li class="datalist_li">baidu</li>
<li class="datalist_li">youtube</li>
<li class="datalist_li">twitter</li>
</ul>
</div>
</body>
</html>

  

模仿下拉框datalist的jquery插件的一点小经验的更多相关文章

  1. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  2. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  3. select标签的下拉框为图片的插件

    1 参考文献: [1] https://github.com/rvera/imag...[2] https://rvera.github.io/image... [3] http://webseman ...

  4. 集成iscroll 下拉加载更多 jquery插件

    一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...

  5. Jquery制作--美化下拉框

    平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...

  6. jQuery实现的3个基础案例(仿QQ列表分组,二级联动下拉框,模拟员工信息管理系统)

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  7. div自定义下拉框

    因为原生的下拉框不能修改其属性,很难美化下拉框. 所以自己用div简单自定义了一下下拉框,想美化直接修改css即可 <!DOCTYPE html> <html lang=" ...

  8. jquer回显选中select下拉框

    公司使用的框架比较旧,没有使用el等表达式. <% String context = request.getContextPath(); String index = (String)reque ...

  9. JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

随机推荐

  1. HTML的语义化,你需要深入了解

    有关HTML的一些基础课程,很多网站都有讲,于我而言,真正实践起来,我只要求我能够让它表现出我所想要的结果即可.然而,这种要求,对于后期的维护与测试,真的是......想起日前我们所做的这个项目,那里 ...

  2. [SinGuLaRiTy] 最短路计算代码库

    [SinGuLaRiTy-1002] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. Dijkstra: 题目描述 有向图的单源点最短路问题( ...

  3. Excel图表-"DNA"图

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  4. 《ECMAScript标准入门》第二版读书笔记

    title: <ECMAScript标准入门>第二版 date: 2017-04-10 tags: JavaScript categories: Reading-note 2015年6月, ...

  5. AOP学习笔记一

    软件开发的目的是为了解决各种需求,包括业务需求和系统需求.目前,业界通过使用面向对象的编程思想,已经可以对业务需求等普通关注点进行很好的抽象与封装,并且使之模块化.但是对于系统需求一类的关注点来说,情 ...

  6. 写出稳定的Modbus代码之点滴经验

    1.引言 Modbus是工业领域重要的协议,物理层有常见的RS485双绞线和TCP,所以又常说Modbus 485开发和Modbus TCP开发. 前者就是串口通信,比较简单.后者涉及到网络协议,复杂 ...

  7. Spring-quartz 可传参(包括service注入)任务调度 多个任务调度

    1 JobDetail 注意:一个JobDetail中 只能触发一个方法,如果要调度多个任务 需要有多个job类! 普通任务:总调度(SchedulerFactoryBean)--> 定时调度器 ...

  8. Java事物基础总结

    1.什么是事物? 事物是逻辑上的的一种操作,这个操作过程中的每一个元素要么全部成功,要么全部失败.例如,银行转账过程视为一个事物,转出过程和转入过程要求全部成功或全部失败,通过提交事物或者回滚事物实现 ...

  9. 事件驱动的Python实现

    EventManager事件管理类实现,大概就百来行代码左右.如果有不了事件驱动的工作原理的可以看前一篇<事件驱动的简明讲解> # encoding: UTF-8 # 系统模块 from ...

  10. php生成器使用总结

    一般我们在迭代一组数据的时候,需要创建一个数据,如果数组很大,则会消耗很大性能,甚至造成内存不足抛出error比如: //Fatal error: Allowed memory size of 134 ...