基于jQuery打造智能的人员选择输入框

核心提示： 容器我们用Div就可以了，小方块也比较简单 ，基于jQuery打造智能的人员选择输入框(2)，来看一下，最外层是div包裹，接着就是CSS了，这个css其实很简单，然后是嵌套一个a标签（为了方便以后做hover效果），在a标签中是一个span放置文字

容器我们用Div就可以了，小方块也比较简单 ，来看一下，最外层是div包裹，然后是嵌套一个a标签（为了方便以后做hover效果），在a标签中是一个span放置文字，

input[type=hidden] 来防止这个节点的数据，img就似乎删除按钮的载体，那控件的载体又是什么呢？其实从设计来说可以是个input的，但是我更偏向于div，在实例化的时候往div中动态添加一个input来附加autocomplete的属性，如果反过来在input外包裹容器的话，在一些特殊情况下定位会是问题。

那html既然已经定义好了，接着就是CSS了，这个css其实很简单，就是容器的边框还有就是item的样子而已，来看下代码

01..bbit-usbox
02.{
03.　　　　border:　solid　1px　#3C7FB1;　　　　　　　
04.　　　　margin:20px;
05.　　　　padding:2px;　　　
06.　　　　display:block;
07.　　　　background-color:#f3fefe;
08.}
09..bbit-usbox　.bbit-usbox-item
10.{
11.　　　　width:auto;
12.　　　　margin-left:4px;
13.　　　　margin-top:2px;
14.　　　　background-color:#e0e5ee;　　　
15.　　　　border:　solid　1px　#ccd5e4;　　　
16.　　　　float:left;　　
17.　　　　white-space　:　nowrap;
18.}
19..bbit-usbox　.bbit-usbox-item　a
20.{
21.　　　　color:#000;
22.　　　　text-decoration:none;
23.　　　　padding-left:2px;
24.}
25..bbit-usbox　.bbit-usbox-item　a　span
26.{　
27.}
28..bbit-usbox　.bbit-usbox-del
29.{
30.　　　　background:url("images/usbox/del.gif")　no-repeat　50%　80%;
31.　　　　width:10px;
32.　　　　height:5px;
33.　　　　cursor:pointer;
34.　　　　border:none;
35.　　　　vertical-align:middle;
36.　　　　margin-left:2px;
37.}
38..bbit-usbox-boxc
39.{
40.　　margin-left:4px;
41.　　clear:left;
42.}
43..bbit-usbox-box
44.{
45.}
46..bbit-usbox-boxc　　input
47.{
48.　　　　background-color:#f3fefe;
49.　　　　width:100%;
50.　　　　height:17px;
51.　　　　display:block;
52.　　　　border:none;　　　
53.}