`
dwj147258
  • 浏览: 194739 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

带搜索下拉框

    博客分类:
  • js
阅读更多

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

本例子中用了一个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. });  

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

 


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

分享到:
评论

相关推荐

    C# 自定义带搜索下拉框

    在C#编程中,自定义带搜索功能的下拉框是一种常见的需求,它能提供更加高效和便捷的用户交互体验。系统自带的下拉框(ComboBox)虽然简单易用,但在处理大量数据时,如果没有搜索功能,用户可能需要滚动浏览整个列表...

    JQ JS javascript bootstrap 带搜索 下拉框 select

    `带搜索下拉框`是Web开发中常见的一种用户界面元素,常用于提供大量的选择项,同时通过搜索功能帮助用户快速定位所需选项。在bootstrap中,`select`或者`dropdown`组件可以实现这个功能。结合JavaScript和jQuery,...

    JQ JS javascript layui UI框架 带搜索下拉框 select

    本示例中,"JQ JS javascript layui UI框架 带搜索下拉框 select" 是一个基于jQuery和layui的特定功能实现,即在layui的UI设计中创建了一个具有搜索功能的下拉选择框。这个功能在许多网页应用中都很常见,例如在表单...

    带搜索的下拉框,并且支持多选

    在IT界,尤其是在前端开发中,"带搜索的下拉框,并且支持多选"是一个常见的功能需求。这种设计主要用于提高用户体验,使用户能够在大量的选项中快速定位并选择多个符合需求的项目。以下是对这个主题的详细解释: 一...

    带搜索的下拉框

    在IT界,"带搜索的下拉框"是一种常见的用户界面元素,广泛应用于网页和应用程序设计中,旨在提供用户友好的交互体验。这种组件结合了下拉列表与搜索功能,使得用户能够在大量的选项中快速找到并选择他们需要的项目。...

    jQuery实现带搜索功能的下拉框

    在jQuery库的支持下,实现这种“带搜索功能的下拉框”变得非常简单。这里我们将深入探讨`searchableSelect`插件,它是jQuery的一个扩展,专门用于创建具有搜索功能的下拉框。 `jQuery searchableSelect` 插件提供了...

    百度搜索下拉框转刷工具

    《百度搜索下拉框转刷工具详解》 在互联网营销领域,搜索引擎优化(SEO)是一项至关重要的工作。其中,利用百度搜索下拉框进行品牌或关键词的推广是一种常见且有效的策略。百度搜索下拉框中的相关词往往能引导用户...

    带checkbox的下拉框

    - **Bootstrap Multiselect**:Bootstrap框架提供了一个名为Multiselect的插件,它可以将普通的`&lt;select&gt;`元素转换为带有复选框的多选下拉框。 - **React/Vue/Angular等框架组件**:在现代前端框架中,有许多现成...

    QT 搜索下拉框 类似网页

    输入栏使用linEdit ,获取焦点,展示下拉界面,界面显示当前栏位内内容的模糊查询信息;失去焦点或点击界面其他位置,下拉界面小时。 下拉界面使用QWidget,根据lineEdit的内容展示对应的信息

    js实现带搜索功能的下拉框

    在网页开发中,一个带有搜索功能的下拉框可以极大地提升用户体验,特别是在处理大量选项时。JavaScript(简称JS)作为客户端脚本语言,是实现这一功能的常用工具。本篇文章将详细探讨如何使用JS实现一个带搜索功能的...

    带输入框的下拉框.rar

    总的来说,"带输入框的下拉框"是一个实用的UI组件,结合了搜索和选择的功能,适用于各种需要用户从多个选项中选取的场景。这个压缩包中的示例可能提供了一种实现方法,开发者可以根据自己的需求进行调整和扩展。在...

    jquery下拉框集成搜索功能

    在本主题中,我们将探讨如何在jQuery下拉框(Select元素)中集成搜索功能,以便用户能更高效地找到所需选项。这个功能在大型数据集或分类繁多的下拉菜单中尤其有用。 首先,我们需要理解jQuery的基本用法。jQuery...

    搜索下拉框组件 chosen

    **Chosen 搜索下拉框组件详解** Chosen 是一个流行的JavaScript库,专门设计用于美化和增强HTML中的`&lt;select&gt;`元素。这个插件的主要目标是解决原生`&lt;select&gt;`标签在显示大量选项时的用户体验问题,以及提供搜索功能...

    带搜索框的jQuery下拉框插件

    带搜索框的jQuery下拉框插件

    6种样式的下拉框

    这种多选下拉框可能带有复选框或者单选按钮,用户可以直观地看到已选中的项。 5. **搜索功能**: 对于包含大量选项的下拉框,可以添加搜索功能,让用户在输入关键词后快速找到所需选项,提升查找效率。 6. **...

    C# ASP.net 下拉框自动搜索查询功能

    为了提升用户体验,我们有时需要在下拉框中添加搜索功能,使得用户能快速找到他们想要的选项。本教程将详细讲解如何在C# ASP.NET中实现下拉框的自动搜索查询功能。 首先,我们需要在ASP.NET页面中添加一个...

    带搜索功能的下拉框

    带搜索功能的下拉框, 适合各种开发语言,开发时会遇到下拉框会有很多选项的情况,这时候就要用到搜索功能来快速找到选项,将我文中带(搜索功能的下拉框.htm)文件中的option选项换成你自己的选项即可,如果是从数据...

    下拉框(select),可以多选,带有分组搜索功能

    在本场景中,我们讨论的是一个具有特定增强功能的下拉框,它支持多选、分组以及搜索功能。这样的组件在处理大量数据或需要用户提供多个选择时特别有用。下面我们将详细探讨这些特性。 1. **多选功能**:在传统的...

Global site tag (gtag.js) - Google Analytics