寫完這個名字忽然覺得有點標題黨的嫌疑，但是又不知道什么樣的名字比較合適，那就暫且這樣吧。

今天要講的東西比較簡單，其中會用到另外的一個jQuery控件，是一個人員選擇輸入框。那到底是個什么東西呢？
那好還是先來看最后的效果，有個直接的了解。

是不是和時下流行的SNS網站的選擇人員控件很像？對比一下，哈哈是的，其實目的是差不多的。

其實還有很多這樣應用，如郵件系統中發件人，在輸入時的自動補全，它是一個類似于Autocomplete的功能，但是又要比Autocomplete多那么一些功能的插件

基于這個情況，我所編寫的這個控件時基于一個Autocomplete控件的，它就是jQuery.autocomplete,它的官方網址是：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

大家可以通過訪問以下來獲取它的使用方法，資料和demo還是比較詳細，我這邊就不重復寫了。所以我們還是直接開始擴展的部分

第一我們還是先確定HTML

從html上分析autocomplete和選人控件的所查的就是

1：外側的容器 2：選中的人員的那個小方塊

容器我們用Div就可以了，小方塊也比較簡單 ，來看一下，最外層是div包裹，然后是嵌套一個a標簽（為了方便以后做hover效果），在a標簽中是一個span放置文字，

input[type=hidden]來防止這個節點的數據，img就似乎刪除按鈕的載體，那控件的載體又是什么呢？其實從設計來說可以是個input的，但是我更偏向于div，在實例化的時候往div中動態添加一個input來附加autocomplete的屬性，如果反過來在input外包裹容器的話，在一些特殊情況下定位會是問題。

那html既然已經定義好了，接著就是CSS了，這個css其實很簡單，就是容器的邊框還有就是item的樣子而已，來看下代碼

.bbit-usbox
{
    border: solid 1px #3C7FB1;        
    margin:20px;
    padding:2px;    
    display:block;
    background-color:#f3fefe;
}
.bbit-usbox .bbit-usbox-item
{
    width:auto;
    margin-left:4px;
    margin-top:2px;
    background-color:#e0e5ee;    
    border: solid 1px #ccd5e4;    
    float:left;   
    white-space : nowrap;
}
.bbit-usbox .bbit-usbox-item a
{
    color:#000; 
    text-decoration:none;
    padding-left:2px;
}
.bbit-usbox .bbit-usbox-item a span
{  
}
.bbit-usbox .bbit-usbox-del
{
    background:url("images/usbox/del.gif") no-repeat 50% 80%;
    width:10px;
    height:5px;
    cursor:pointer;
    border:none;
    vertical-align:middle; 
    margin-left:2px;
}
.bbit-usbox-boxc 
{
  margin-left:4px;
  clear:left;
}
.bbit-usbox-box
{
}
.bbit-usbox-boxc  input
{
    background-color:#f3fefe;
    width:100%;
    height:17px;
    display:block;
    border:none;    
}

it知識庫：基于jQuery打造智能的人員選擇輸入框，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。