{% 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的更多相关文章

  1. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  2. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  3. 【Select2】带搜索框的下拉框美化插件

    1  引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...

  4. 使用jquery select2实现下拉框搜索功能

    由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...

  5. laravel7 jqAjax下拉框搜索

    html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...

  6. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

  7. BootStrap下拉框搜索功能

    <!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www. ...

  8. DataTables给每一列添加下拉框搜索

    $(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...

  9. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

随机推荐

  1. python概念-其实只要简单了解一下,但是却讲了将近两个小时的知识点:元类

    说实话,我真心不太想总结这个东西,算了,炒一下egon的吧 1 引子 1 class Foo: 2 pass 3 4 f1=Foo() #f1是通过Foo类实例化的对象 python中一切皆是对象,类 ...

  2. CentOS Linux 7 安装教程

    建立新的虚拟机 将CentOS 7 ISO文件插入到CD-Rom 启动虚拟机,F12选择启动方式为CD/DVD 选择Install CentOS Linux 7 加载安装必要文件 选择安装过程所显示的 ...

  3. Java Dom对XML的解析和修改操作

    与Dom4J和JDom对XML的操作类似,JDK提供的JavaDom解析器用起来一样方便,在解析XML方面Java DOM甚至更甚前两者一筹!其不足之处在于对XML的增删改比较繁琐,特开篇介绍... ...

  4. PCI学习之总线原理01

    -----------以下资料由网络资料整理而成-------- PCI即Peripheral Component Interconnect,中文的意思是“外围器件互联”. PCI总线支持32位和64 ...

  5. QEMU漏洞挖掘

    转载:https://www.tuicool.com/articles/MzqYbia qemu是一个开源的模拟处理器硬件设备的全虚拟化仿真器和虚拟器. KVM(kernel virtual mach ...

  6. dstat 服务器性能查看命令【转】

    一. 安装和简解 # yum -y install dstat# dstat CPU状态:CPU的使用率.这项报告更有趣的部分是显示了用户,系统和空闲部分,这更好地分析了CPU当前的使用状况.如果你看 ...

  7. 三、springcloud之服务调用Feign

    一.背景 项目中接口调用: Httpclient Okhttp Httpurlconnection RestTemplate 微服务提供了更简单,方便的Feign 二.Feign简介 Feign是一个 ...

  8. Kaggle案例分析1--Bestbuy

    1. 引言 Kaggle是一个进行数据挖掘和数据分析在线竞赛网站, 成立于2010年. 与Kaggle合作的公司可以提供一个数据+一个问题, 再加上适当的奖励, Kaggle上的计算机科学家和数据科学 ...

  9. python之uinttest，用例执行顺序

    unittest单元测试框架, 以test开头的测试用例,默认执行顺序是按照ASC码来执行 如果有类,先排序执行类,在执行类中,再排序用例顺序执行 如果想要按照指定的顺序执行测试用例. 那么就需要用到 ...

  10. JS Ajax异步请求发送列表数据后面多了[]

    还在苦逼的写代码,这里就不详细了,直接抛出问题: 如图所示: 前端ajax请求向后端发送数据的时候,给key添加了[]出现很多找不到原因, 后面在说 解决方法: 暂时先这样记录一下,下次方便查找,好了 ...