写完这个名字忽然觉得有点标题党的嫌疑，但是又不知道什么样的名字比较合适，那就暂且这样吧。

今天要讲的东西比较简单，其中会用到另外的一个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打造智能的人员选择输入框，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。