jQuery Combobox 扩展 (select+autocomplete)20110730更新

jQuery UI虽然比不上extJS的UI,但也在慢慢发展完善。

http://jqueryui.com/demos/autocomplete/#combobox  这个combobox扩展挺不错的,可以让下拉菜单具有字符自动完成过滤功能。

 

不过因为并非官方扩展所以存在一些问题,比如不支持参数设置;IE不支持combox的change事件 并且change会有滞后性,用于表单当通过按钮选择项目后直接提交会导致select选项未更新;双击输入框自动选中内容(方便快速删除)。

 

试着更新了代码,支持标准格式,

比如初始化时设定input框(虚拟的select框)宽度 : .combobox({size: 30})

或者对键盘输入延迟速度 .combobox({size: 30, delay: 50})  // 50ms

或者动态更改设置:

$(selector).combobox();

........

$(selector).combobox("option", "size",  50)

 

存在的问题:

 Firefox中当通过输入法输入中文第一次上屏时不会触发事件,需要继续输入中文或者输入一个空格再backspace删除掉这个空格才能触发自动完成事件。不过这是jQuery.UI键盘事件和中文输入法之间的兼容问题(西方人几乎不可能发现这种bug),和本插件无关。 (patch fixed)

 

效果可以到上面那个url查看。

 

html文件需要相应文件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.custom.css" />

<style>
button.comboboxButton {width:2em;  margin-left: -1px;}
button.comboboxButton .ui-button-text {display:block; line-height:1;}
.ui-autocomplete-input {margin:0; padding:0.3em 0 0.31em 0.3em; *padding:0.38em 0 0.46em 0.3em;}
</style>

</head>
<body>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js" ></script>
</body>
</html>

 

update:

  2010.07.23 修正输入+或者c++时抛出 'invalid quantifier +' 错误.  改善IE显示效果。 增加demo.

  2010.08.04    FF下给input添加input事件,补丁解决中文输入时触发匹配问题;
                       解决通过下拉菜单选择项目之后继续输入字符到不匹配状态后失焦时无法清空

  2010.08.12      jQuery.UI升级到1.84,在此基础上修改。

     add:    直接输入匹配字符失焦后保留
     add:    添加title参数,可自定义下拉按钮问题说明,默认是‘展开’

     20100804版本适用于jQuery.UI v1.82版本,不适用1.84版本

 

  2010.08.23  修正样式,输入框及按钮缩小

 

  2010.11.10 大图标样式有个更好的CSS,看18楼回复

 

  2011.07.30 更新<input>元素生成方式,增加destroy()方法。提供兼容jQuery1.6版本。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值