使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框
2016-06-16 15:07
766 查看
这也是下拉列表太长了之后,使用的同事提出来的意见,
然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦,
就找了几个JQUERY的插件测试了一下,最后选中了flexselect。
基本操作如下:
1,基本的JS,和CSS包含:
2,在django的forms.py里放入相关的class:
3,在相关模板里启动类的执行:
4,GOGOGOGOGOOG:
然后,本来开始想将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:
相关文章推荐
- Python实现类似jQuery使用中的链式调用的示例
- JQuery+Ajax实现下拉框联动(省市联动)
- jquery的masonry框架制作图片流
- jQuery使用
- jquery实现简单的Tab切换菜单
- jquery全选反选
- jQuery on()方法绑定动态元素的点击事件实例代码浅析
- jQuery页面元素动态添加后绑定事件丢失方法,非 live
- Jquery 设置焦点
- 低版本jQuery在Firefox中运行不正确的解决
- jquery同一页面跳转到指定位置
- 85---ajax实现的传统方式以及jquery方式,jquery方式的五种方法,json对象的转换方法, JSON类型的Result
- 最简单的jQuery插件
- jQuery的层级查找方式分析
- jQuery slideToggle() 方法 多个div怎么写
- JQuery常用方法一览
- 自己写的jQuery实现下拉列表,有事件冒泡,带有比较详细的注释
- jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
- DataType vs ContentType in jquery ajax [duplicate] 数据类型
- jquery 插件写法