欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

带搜索下拉框

程序员文章站 2022-05-13 13:34:00
...

下拉框中的选项太多   需要一个带搜索功能的输入框,类似于下面这个样子:带搜索下拉框
            
    
    博客分类: js 下拉框搜索javascript 

本例子中用了一个js插件,首先需要引入插件的css和css中用到的图片,再引入插件的js

第一步引入css:

 

[html] view plain copy
 
 print?
  1. <link href="${resources}/css/bootstrap/select2.css" rel="stylesheet" >  


第二步修改css用到的插件图标:

 

 

[html] view plain copy
 
 print?
  1. background: url('../../img/select2.png') right top no-repeat;  

把css中的所有引入的select2.png的图片更换成你本地的路径

 

第三步导入需要用到的js:

 

[html] view plain copy
 
 print?
  1. <script type="text/javascript" src="${resources}/js/bootstrap/select2.min.js"></script>  

在导入js插件前先导入需要的jquery组件,类似于这样的:

[html] view plain copy
 
 print?
  1. <script type="text/javascript" src="${resources}/js/bootstrap/custom.js"></script>  
  2. <script type="text/javascript" src="${resources}/js/bootstrap/jquery-migrate-1.2.1.min.js"></script>  
  3. <script type="text/javascript" src="${resources}/js/bootstrap/jquery.tagsinput.min.js"></script>  
  4. <script type="text/javascript" src="${resources}/js/bootstrap/select2.min.js"></script>  

第四步使用插件:

 

页面代码:页面用的是freemarker构建的

 

[html] view plain copy
 
 print?
  1. <select name="brandId1" id="brandId1" class="form-control select2">  
  2.     <option value="">请选择</option>  
  3.     <#if brandList?exists> <#list brandList as item>  
  4.         <option value="${item.id}" name="${(item.icon)!''}"> ${item.name}</option>  
  5.     </#list> </#if>  
  6. </select>  

js用的是类选中 select2   js代码:

 

 

[javascript] view plain copy
 
 print?
  1. // Select2  
  2. jQuery(".select2").select2({  
  3.      width: '100%'  
  4. });  

写到这里点击一下你的下拉框是不是和我的一样了呢,不一样的话请留言吧!

 


页面需要的插件:插件下载地址