下拉框搜索插件chosen
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试chosen插件</title> {#需要引入js、css文件#} <script src="{% static "components/jquery/dist/jquery.js" %}"></script> <script src="{% static "components/chosen/chosen.jquery.js" %}"></script> <link rel="stylesheet" href="{% static "components/chosen/chosen.css" %}"/> <style> {#隐藏搜索框,F12查看DOM#} {% comment %} .chosen-container-single .chosen-search input { display: none; } {% endcomment %} </style> </head> <body> <select name="select_name" id="select_id" class="chosen-select"> <option value="0">中国</option> <option value="1">加拿大</option> <option value="2">美国</option> <option value="3">法国</option> </select> </body> </html> <script> var chosen_plugin = $('.chosen-select').chosen({ allow_single_deselect: true,//是否允许取消选择 search_contains: true,//关键字模糊搜索,设置为false,则只从开头开始匹配 width: '50%',//下拉框宽度 no_results_text: "没有找到结果!",//搜索无结果时显示的提示 max_selected_options: 6 //当select为多选时,最多选择个数 }); {#change事件#} chosen_plugin.change(function () { $("#select_id").add(new Option("天国","4")); }); {#动态更新select下的选择项,只要在更新选择项后触发Chosen中的liszt:updated事件就可以了#} chosen_plugin.trigger("liszt:updated"); </script>
下拉框搜索插件chosen的更多相关文章
- 原生javascript实现 下拉框搜索功能
由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
- 【Select2】带搜索框的下拉框美化插件
1 引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...
- 使用jquery select2实现下拉框搜索功能
由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...
- laravel7 jqAjax下拉框搜索
html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...
- jquery 仿百度搜索下拉框的插件
转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...
- BootStrap下拉框搜索功能
<!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www. ...
- DataTables给每一列添加下拉框搜索
$(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...
- jQuery下拉框扩展和美化插件Chosen
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
随机推荐
- 关于onConfigurationChanged
这两天测试app时,发现一个奇怪问题,app在启动后,Activity会onCreate两次,起初以为是横屏设置导致,随即在Activity中添加了android:configChanges=&quo ...
- VM虚拟机上连接usb无反映
主机的usb连接又是正常的,排除了usb3.0的接口原因后,突然想到了是不是虚拟机的什么服务没有开?进入到控制面板->管理工具->服务,找到 V开头的,发现原来确实是虚拟机有关usb的服务 ...
- Spring Boot1.5X升级到2.0
配置文件 大量的Servlet专属的server.* properties被移到了server.servlet下 拦截器 public class MyWebMvcConfigurerAdapter ...
- Python标准库笔记(10) — itertools模块
itertools 用于更高效地创建迭代器的函数工具. itertools 提供的功能受Clojure,Haskell,APL和SML等函数式编程语言的类似功能的启发.它们的目的是快速有效地使用内存, ...
- Linux内核抢占实现机制分析【转】
Linux内核抢占实现机制分析 转自:http://blog.chinaunix.net/uid-24227137-id-3050754.html [摘要]本文详解了Linux内核抢占实现机制.首先介 ...
- 【鬼脸原创】JQuery获取元素的方法总结
目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本 ...
- IOS使用SourceTree
一.安装sourceTree 1.下载 访问SourceTree 软件官方下载地址 : https://www.sourcetreeapp.com 下载macos版本 2.安装 安装和windows安 ...
- linux 安装 Elasticsearch6.4.0详细步骤以及问题解决方案
1.jdk 安装 参考资料:https://www.cnblogs.com/shihaiming/p/5809553.html 2.elasticsearch 安装 下载:https://artifa ...
- 洛谷P1186玛丽卡
传送门啦 先跑一遍最短路,将最短路的路径记录下来,然后枚举每一条最短路的边,将其断掉,记录此时的1-n的时间,取其中最大的一个时间即为所求. (通过 $ cut[][] $ 和 $ f[] $ 进行操 ...
- python目录/文件操作
目录操作 sys.argv[0] # 获得当前脚本路径,即当前工作目录\脚本名 os.getcwd() # 获得当前工作目录 os.path.abspath('.') # 获得当前工作目录 os.pa ...