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