jquery combobox
虽然在.net中有ajaxControlToolKit的combobox。但是那个combobox实在是不给力。在网上找了很久,还是没有找到合适的combobox.于是自己封装了一个。
主要实现的功能有。
1.点击标签,显示所有数据源
2.在text中输入文本,模糊匹配。
3.配置是否必须要选择。
4.添加选中时的事件。
具体描述如下。
combobox原型属性: 原型属性主要的用途为一次设定,所有combobox的实例都可以使用
maxLength 自动搜索时,显示的最大长度,默认为所有,主要是因为搜索出来过多时,影响速率
mustSelect 必须选择,默认为false ,配置该combobox是否必须选择
fieldText 数据源的文本字段,默认为text
fieldValue 数据源的ID字段,默认为id
combobox原型方法
Init() 初始化所有combobox外观,第一个参数为jquery选择器,选择多个可以设定textbox的class,第二个参数为图片地址,
combobox属性
host 该combox对应text的选择器,如“#demo”
dataSource 数据源
defaultText combobox默认显示的值
事件
onSelected 当选择一个options时触发,参数为option的 jquery对象,如参数名为jqdom ,那么id应该是jqdom.attr(‘id’)
text应该为jqdom.text();
dataBind() 绑定combobox的数据源。
简单调用
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link rel="Stylesheet" href="combobox/jquery.combobox.css" />
<script type="text/javascript" src="combobox/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="combobox/jquery.combobox.js"></script>
<script type="text/javascript">
$(function() {
//设置该页面上所有combobox的模式
//combobox.prototype.mustSelect = false; //必须选择参数,默认为false
//combobox.prototype.fieldText = "text"; //设置数据源文本命名,默认为text
//combobox.prototype.fieldValue = "id"; //设置数据源id命名,默认为id
// combobox.prototype.maxLength = 3; //自动搜索显示20项,默认为null.即不限制
//初始化所有combobox
//如果有多个text要改成combobox.请在text上设置class。然后id参数使用‘.class',如 combobox.prototype.init(".demos")
combobox.prototype.init("#demo", "combobox/dropdown.gif");
//绑定
var combo = new combobox("#demo");
combo.dataSource = [{ id: 'i1', text: 't1' }, { id: 'i2', text: 't2' }, { id: 'i3', text: 't3' }, { id: 'i4', text: 't4' }, { id: 'i5', text: 't5'}];
//combo.defaultText = "xx";//text的默认值,默认为text的value;
combo.dataBind();
});
</script>
</head>
<body>
<input type="text" id="demo" value="ab" />
</body>
</html>
样式不是很好,懂得css的人调下,目前在ff,ie8中没有问题。
demo下载
转载于:https://www.cnblogs.com/xinjian/archive/2011/03/02/1968955.html
jquery combobox相关推荐
- Jquery combobox的使用总结----持续更新
最近一个项目要在下拉框中添加复选框,然后在这个过程中,发现越来越多的实现方法,在这里记录一下combobox. 文章最后我会贴一下代码. 先贴一个实例,直接运行就是Jquery的复选框就可以出现了,这 ...
- 240个jquery插件
240个jquery插件 http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ File uplo ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
- 新鲜的jquery插件收集
参考网站http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html 1.Colorful Sliders With j ...
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- 240多个jQuery常用到的插件
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 ...
- 240多个jQuery插件 (转)
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 ...
- 240多个jquery插件
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 ...
最新文章
- linux 毫秒 转换方法,linux-将抖动转换为毫秒
- 【Flutter】Flutter 混合开发 ( 混合开发中 Flutter 的 热重启 / 热加载 )
- 图解Linux命令实例
- Jupiter黑客松——IPFS开发者大赛火热报名中!
- 二叉树与树、森林之间的转换
- java在文件里搜字段_Java 如何找出两个文本文件中有相同字段的行
- MySQL实现SQL Server排名函数
- 还花几个小时整理线缆你就OUT了,VR自由漫步来了
- hadoop启动HDFS命令
- 模拟退火算法求解超市布局问题
- 股票的收益率计算公式
- C++ 16进制日志输出 每行右侧ASII输出
- 画外因 | 笛卡尔与瑞典女王在 “数学课”上谈人生
- No country for old men 老无所依,从奥斯卡来说,我无所依
- 2008nian元旦
- find和find_if
- java 给pdf解密_PDF文件如何解密?分享一个简单的PDF解密方法
- 墨子管理启发的“天龙八部”
- try..catch捕获不到空指针等异常的问题
- 集齐支付宝福卡秘籍来了!