jQuery 自动补全插件

发表于

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