近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃,

无奈之下只好自己改了,

话不多说上效果图:

模糊搜索广会自动补全所有带广的下拉选项.每个选中的可以单独删除.

大神勿喷,给需要的朋友个帮助,话不多说,上代码:

<!doctype html>
<html lang="en">

<head>

<meta charset="utf-8">

　　<title>下拉框自动补全多选模糊搜索</title>
　　<link rel="stylesheet" href="chosen.css">

　　<style type="text/css" media="all">

　　　　/* fix rtl for demo */

　　　　.chosen-rtl .chosen-drop { left: -9000px; }

　　</style>

</head>

<body>

　　<form>
　　　　<div id="container">
　　　　　　<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
　　　　　　　　<!--<option value="American Black Bear1">American Black Bear</option>
　　　　　　　　<option value="Asiatic Black Bear1">Asiatic Black Bear</option>
　　　　　　　　<option value="Brown Bear1">Brown Bear</option>
　　　　　　　　<option value="Giant Panda1">Giant Panda</option>
　　　　　　　　<option value="Sloth Bear1">Sloth Bear</option>
　　　　　　　　<option value="Sun Bear1">Sun Bear</option>
　　　　　　　　<option value="Polar Bear1">Polar Bear</option>
　　　　　　　　<option value="Spectacled Bear1">Spectacled Bear</option>-->
　　　　　　</select>
　　　　</div>
　　<script src="jquery-1.8.2.min.js"></script>//引入jqyery
　　<script src="chosen.jquery.js"></script>//下拉框控件js
　　<script type="text/javascript"> //设置下拉框属性
　　　　var config = {

　　　　'.chosen-select' : {},

　　　　'.chosen-select-deselect' : {allow_single_deselect:true},

　　　　'.chosen-select-no-single' : {disable_search_threshold:10},

　　　　'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},

　　　　'.chosen-select-width' : {width:"95%"}

　　　　}

　　for (var selector in config) {

　　　　$(selector).chosen(config[selector]);

　　}

　　</script>
<script type="text/javascript">

　　　　 $.get("http://localhost:6625/interface/CityAdd/AreaAdd.ashx?MethodName=GetProvince",//获取后台json数据
　　　　　　function (data) {
　　　　　　　　debugger;
　　　　　　　　var d = $.parseJSON(data); 获取后天 json 数据
　　　　　　　　//alert(d);
　　　　　　　　for (var i = 0; i < d.length; i++) {
　　　　　　　　$('#multiple-label-example').append //循环select option值
　　　　　　　　(
　　　　　　　　　　'<option value="' + d[i].pro_number + '">' + d[i].pro_cname + '</option>'  //动态添加open
　　　　　　　　);
　　　　　　　　　　$("#multiple-label-example").trigger("liszt:updated"); //绑定数据记得写此方法,不然绑定无效 multiple-label-example 为 select id;
　　　　　　　　}
　　　　　});

　　</script>
　　</form>
</body>
</html>

具体文件只能放自己百度网盘地址了,需要的朋友去获取一下,网盘里json格式,也可以自己定义,按业务来

链接：https://pan.baidu.com/s/1N1mga_LmrsUKIjyySw0Ciw 密码：5v37

jquery 下拉框插件,实现智能补全,模糊搜索,多选的更多相关文章

  1. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  2. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  3. 自制Jquery下拉框插件

    (function ($) { $.fn.select3 = function (option) { $(this).each(function () { var _this = $(this); v ...

  4. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  5. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  6. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  7. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  8. jquery 下拉框 收藏

    jquery 下拉框  Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

  9. jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

随机推荐

  1. 编写一个c++工程

    c++接触的很少,之前也只是会编写一个简单的cpp文件,但一个工程的实现,往往不仅包括源文件(.cpp后缀文件)一般还有头文件(.h后缀文件)等.一个c++工程中只能有一个main函数,这个函数所在的 ...

  2. TCP 流量控制、拥塞控制

    流量控制: 流量控制是为了控制发送方发送速率,保证接收方来得接收. 接收方发送的确认报文中的窗口字段可以用来控制发送方窗口大小,从而影响发送方的发送速率.将窗口字段设置为 0,则发送方不能发送数据. ...

  3. Mysql压缩包版的安装方法详解

    Mysql安装的时候可以有msi安装和zip解压缩两种安装方式.zip压缩包解压到目录,要使用它还需对它进行一定的配置.下面对Mysql压缩包版的安装方法进行详细的描述,要是此文有不正确的认识,希望大 ...

  4. rabbitmq 生产环境配置

    目录 一 rabbitmq 生产部署 1.1 rabbitmq.conf 1.2 advanced.config 1.3 rabbitmq-env.conf 1.4 在生产环境中不适用的策略. 一 r ...

  5. linux下更改时区

    起因: 装系统时一走神把时区选错了,导致时间不正确,但是又不想重装,所以找了一下解决方法. 解决方案: 我的环境时这样的,其他的环境没试过. [root@werserver01 ~]# cat /et ...

  6. Python3 中使用sys.argv详解

    #/usr/bin/env python #coding:utf-8 import sys # print(sys.argv[1]) def readFile(filename): "&qu ...

  7. 数据结构与算法(周鹏-未出版)-第六章 树-6.5 Huffman 树

    6.5 Huffman 树 Huffman 树又称最优树,可以用来构造最优编码,用于信息传输.数据压缩等方面,是一类有着广泛应用的二叉树. 6.5.1 二叉编码树 在计算机系统中,符号数据在处理之前首 ...

  8. FineUI开源版（ASP.Net）初学手册

    女朋友鄙视我原创少... 1.下载 进入官方论坛:http://www.fineui.com/bbs/ 要用到下载源代码和空项目下载 http://fineui.codeplex.com/ http: ...

  9. js设计模式总结3

    1.模板方法模式 模板方法就是将多个模型抽象化归一,从中取出一个最基本的模板,当然这个模板可以作为实体对象也可以作为抽象对象,看你具体需求,其他模块只需要继承这个模块方法,也可以扩展这个方法. 举例子 ...

  10. WPF文字修饰——上、中、下划线与基线

    我们知道,文字的修饰包括:空心字.立体字.划线字.阴影字.加粗.倾斜等.这里只说划线字的修饰方式,按划线的位置,我们可将之分为:上划线.中划线.基线与下划线.如图: 从上至下,分别为上划线(Overl ...