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

 

 

 

本文是使用 B3log Solo 从 Vanessa 进行同步发布的

原文地址： http://vanessa.b3log.org/jquery-completed