使用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:

目录
相关文章
|
1月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
39 14
|
2月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
57 9
|
2月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
2月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
2月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
34 2
|
2月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
2月前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
35 2
|
2月前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
40 0
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
86 0
|
JavaScript
jQuery下拉菜单经典案例
jQuery下拉菜单经典案例
114 0