使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

简介: 这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexselect。

这也是下拉列表太长了之后,使用的同事提出来的意见,

然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦,

就找了几个JQUERY的插件测试了一下,最后选中了flexselect。

基本操作如下:

1,基本的JS,和CSS包含:

<link rel="stylesheet" href={% static "css/flexselect.css"%} />
<script src={% static "js/jquery-1.11.2.js"%}></script>
<script src={% static "js/liquidmetal.js"%}></script>
<script src={% static "js/jquery.flexselect.js"%}></script>

2,在django的forms.py里放入相关的class:

server_ip = forms.ModelChoiceField(
        required=False,
        queryset=Server.objects.all(),
        initial='',
        widget=forms.Select(
            attrs={
                'data-placeholder': 'Start typing a ip address',
                'class': 'uk-width-1-4 flexselect',
            }
        ),
    )

3,在相关模板里启动类的执行:

$("select[class*=flexselect]").flexselect({ hideDropdownOnEmptyInput: false });

4,GOGOGOGOGOOG:

目录
相关文章
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
|
JavaScript
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
|
JavaScript
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
|
JavaScript
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件
|
JavaScript 前端开发
带完成百分比的jQuery表单插件
带完成百分比的jQuery表单插件
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
253 14
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
JavaScript
jQuery动画二级下拉菜单
在线演示 本地下载
1108 0
|
JavaScript
jQuery二级下拉菜单
在线演示 本地下载
960 0
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
475 21