jquery 下拉框插件,实现智能补全,模糊搜索,多选
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃,
无奈之下只好自己改了,
话不多说上效果图:
模糊搜索广会自动补全所有带广的下拉选项.每个选中的可以单独删除.
大神勿喷,给需要的朋友个帮助,话不多说,上代码:
<!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 下拉框插件,实现智能补全,模糊搜索,多选的更多相关文章
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- 自制Jquery下拉框插件
(function ($) { $.fn.select3 = function (option) { $(this).each(function () { var _this = $(this); v ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- jquery 下拉框 收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...
- jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery)
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
随机推荐
- ES6之Array.from()方法
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将类数组对象转换为真正数 ...
- Mac上搭建rtmp流媒体服务器(结合FFmpeg的使用)
1.确保安装homebrew ---安装则跳到第二步 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ins ...
- postgresql-递增uuid优点
递增uuid的优点: https://blog.2ndquadrant.com/on-the-impact-of-full-page-writes/ 减小wal生成
- How To Scan QRCode For UWP (2)
这篇随笔主要介绍照相预览功能,重要使用的是MediaCapture对象,MediaCapture对象还可以用来处理录音和录制视频,本文只讨论照相功能. 1:查找摄像头 后置摄像头优先,找不到后置摄像头 ...
- Zookeeper配置文件中的配置项解释和Zookeeper的安装
zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:CS通信心跳时间Zoo ...
- iOS 8.0 bluetooth peripheral manager giving no callback for addService
I am adding the service using: [self.peripheralManager addService:myService]; Is this method depreca ...
- java+selenium+maven+testng框架(一)安装搭建
1.安装jdk(注意:需配置环境变量,可自行百度方法); 2.安装eclipse; 3.安装maven(注意:需配置环境变量,可自行百度方法); 4.在eclipse中新建maven项目 新建成功 注 ...
- poj1330-----------关于公共祖先的问题
关于公共祖先的问题分类: 这类问题有多种解法和类型,根据题目给出的信息去判断使用哪一种 1.给你树,只支持从父亲找儿子,不支持儿子找父亲,最后要求最近公共祖先,使用dfs或者分治 2.支持儿子找父亲, ...
- js便签笔记(12)——浏览TOM大叔博客的学习笔记 part2
1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(九):代码整理优化
工程规划 为了统一配置和代码解耦,我们对代码重新进行了整理和规划. 重新规划后,代码结构如下: kitty-pom: 统一管理 Maven 版本,打包配置 kitty-common: 公共代码模块,主 ...