下拉框内容太多,一个带搜索功能的下拉输入框实现

下拉框中的选项太多   需要一个带搜索功能的输入框,类似于下面这个样子:下拉框内容太多,一个带搜索功能的下拉输入框实现_第1张图片

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

第一步引入css:


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

background: url('../../img/select2.png') right top no-repeat;
把css中的所有引入的select2.png的图片更换成你本地的路径

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

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



第四步使用插件:

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

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

// Select2
jQuery(".select2").select2({
     width: '100%'
});
写到这里点击一下你的下拉框是不是和我的一样了呢,不一样的话请留言吧!


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





你可能感兴趣的:(jQuery,前端页面技术)