分类 标签 存档 ME! 黑客派 订阅 搜索

jQuery 自动补全插件

430 浏览

jQuery 自动补全插件有很多,找了一圈,没找到自己想要的。干脆自己编一个吧 哄哄


 


使用场景:


    使用 B3log Solo 发布文章时,标签(tag)的提示。


具体需求:


    1. 当标签输入框被 focus 后,提示以往用过的所有标签


    2. 可以使用上下键或鼠标移动进行需要标签的选择


    3. 根据当前选中标签,可用 enter 键或鼠标点击进行确定,该标签就会相应的补全到标签输入框中


    4. 使用逗号分隔后,还可继续进行提示


    5. 根据当前光标所在位置的标签,可进行该标签的相应提示


限制:


    目前只能使用英文逗号进行分隔。


 


Javascript Code:


https://bowknot.googlecode.com/svn/trunk/bowknot/web/development-bundle/js/lib/completed.js


 


CSS Code:


.completed-panel{
background-color:#E3E9FF;
border:1px solid #555;
display:none;
padding:2px;
position:absolute;
color:#00C;
overflow:auto;
}
.completed-panel a {
display: block;
text-decoration: none;
}
.completed-panel a.selected {
font-weight: bold;
background-color:#BCF;
}


HTML Code:


<input id="completed" type="text" style="width:100%;"/>

<script type="text/javascript">
$("#completed").completed({
height: 160,
data: ["asss", "ddd"]
});
</script>


Demo


 


PS:


    本来以前写过一个,但是代码被压缩了 5555~ 不过那个功能不全, bug 也比较多。


    今天下午大部分重写了下,悲剧的是没戴眼镜。搞的我头昏眼花啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊~~~~


    眼睛朦胧的我要先闪了,bug 慢慢再完善 HOHO


 


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

评论  
留下你的脚步
推荐阅读