Bootstrap select2之下拉框可自定义输入和选择

一. 引入

1. 引入css文件

2. 引入js文件

3. select标签引入class

class="form-control select2-multiple"

2. 实例

我是在项目搜索框部分要加一个下拉框，本来甚至不需要上面那么多引入，都可以有一个下拉框，但是要求点击可以出现输入框自定义输入来筛选，然后想到了这个。但是想要利用表单来实现，因为不是一种表单，所以样式混乱。

水平排列的表单

通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。

	
		Email

这种是在整个提交表单可以很方便地用这个就可以。但是我搜索栏，div排布是这样的：

	
		xxx
		xxx

然后我只是想在某个li下采用下拉框选择搜索。就不适用了。不过最终还是摸索出来了。

搜索框下拉选择

	
    



	
    
        
            
                
                    
                        
                            Select_time：
                            
                        
                        
                            ~
                            
                        
                        
                            Operator_description：
                            
                        
                        
                            Device_sn：
                            
                        
                        
                            Operator_people：
                            
                                
                                    All
                                    
                                
                            
                        

                        
                            Search
                            Reset
                        
                    
                
            
        

        
            
        
    

	
	


    var accounts = [[${accounts}]];
    $(function() {
		$('#accounts').select2({
            'width': '200px'
        });
	}