`
waiting
  • 浏览: 235067 次
  • 性别: Icon_minigender_1
  • 来自: cq
社区版块
存档分类
最新评论

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版本。

 

 

9
1
分享到:
评论
28 楼 lk617238688 2011-08-03  
再问个问题:点击下拉按钮,展开<option>同时却让页面重新加载了,为何?
27 楼 waiting 2011-07-29  
lk617238688 写道
数据项多时充了一屏,有办法像select一样带滚动条吗?

未压缩版js里面有注释的
/* jQueryUI默认大按钮样式
<style>
button.comboboxButton { margin-left: -1px; }
button.comboboxButton .ui-button-text {line-height:1.35;}
ul.ui-autocomplete {max-height: 200px; overflow-x: hidden; overflow-y: auto; padding:2px;}
</style>
*/

/* jQueryUI小按钮样式
<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;}
ul.ui-autocomplete {max-height: 200px; overflow-x: hidden; overflow-y: auto; padding:2px;}
</style>
*/
26 楼 lk617238688 2011-07-29  
数据项多时充了一屏,有办法像select一样带滚动条吗?
25 楼 jiafugui 2011-02-26  
waiting 写道
jiafugui 写道
js不是很熟 能不能帮忙解决一哈

IE6的毛病太多,早该被历史洪流带走了。
你看看这儿 http://www.js8.in/553.html

哎 木有办法 我们客户用的全是6
24 楼 waiting 2011-02-25  
jiafugui 写道
js不是很熟 能不能帮忙解决一哈

IE6的毛病太多,早该被历史洪流带走了。
你看看这儿 http://www.js8.in/553.html
23 楼 jiafugui 2011-02-25  
waiting 写道
jiafugui 写道
waiting 写道
jiafugui 写道
如果下面有个select的话 会被挡住

浏览器是IE6么?

嗯嗯


这个是IE6的老毛病——select框层级很高会盖住其他元素。有JS的解决办法,大致是弄个遮罩层覆盖在select上面。

js不是很熟 能不能帮忙解决一哈
22 楼 waiting 2011-02-25  
jiafugui 写道
waiting 写道
jiafugui 写道
如果下面有个select的话 会被挡住

浏览器是IE6么?

嗯嗯


这个是IE6的老毛病——select框层级很高会盖住其他元素。有JS的解决办法,大致是弄个遮罩层覆盖在select上面。
21 楼 jiafugui 2011-02-25  
waiting 写道
jiafugui 写道
如果下面有个select的话 会被挡住

浏览器是IE6么?

嗯嗯
20 楼 waiting 2011-02-24  
jiafugui 写道
如果下面有个select的话 会被挡住

浏览器是IE6么?
19 楼 jiafugui 2011-02-24  
如果下面有个select的话 会被挡住
18 楼 waiting 2010-11-10  
经过测试大图标用下面的样式输入框和按钮比较吻合
button.comboboxButton { margin-left: -1px; }
button.comboboxButton,  .ui-button-text {line-height:1.35;}
ul.ui-autocomplete {max-height: 180px; overflow-x: hidden; overflow-y: auto; padding:2px;}
17 楼 waiting 2010-11-08  
you 写道
做的不错,有个地方建议改进一下

select一个选项后再点下拉菜单,刚才选中的并没有高亮或者背景色
原始的select是有背景色的


嗯,有待改进。
多谢~
16 楼 you 2010-11-08  
做的不错,有个地方建议改进一下

select一个选项后再点下拉菜单,刚才选中的并没有高亮或者背景色
原始的select是有背景色的

15 楼 waiting 2010-08-23  
surelei 写道
你好,waiting!你的修改对我非常有帮助,不过我想请教下,如何才能修改选择按钮的大小?
非常感谢!

找到办法了, 0823更新版注释里面有说明。兄弟试试看。
14 楼 surelei 2010-08-21  
谢谢你的回答。
13 楼 waiting 2010-08-21  
surelei 写道
你好,waiting!你的修改对我非常有帮助,不过我想请教下,如何才能修改选择按钮的大小?
非常感谢!

程序是直接使用及Query.UI的样式,我也没找到哪儿可以直接调整(在我项目页面中这个东东的尺寸明显比表单其他元素大些)。
在其官网上 http://jqueryui.com/download 自定义样式模板那儿也没找到可以快捷修改按钮大小的设置,如果把font字体改大超过12px按钮倒是会自动放大,改小就没效果了。估计最小就那样吧。
我对CSS不熟悉,也没精力去弄这个。反正常用的jqGrid也完全采用jqueryUI了,所以就偷懒啦~
12 楼 waiting 2010-08-21  
surelei 写道
对了,还有一个问题,jquery官网上提供的那段combobox的代码是不能新输入内容的,不知道有没有办法改成既可以输入内容又可以选择的combobox。

这个问题是因为代码故意这样做的,因为这涉及到一个逻辑问题:combobox不是普通的自动完成输入框,而是一个自动完成的下拉菜单,所有数据都来自于隐藏的select。所以不允许出现不匹配情况出现。
11 楼 surelei 2010-08-21  
对了,还有一个问题,jquery官网上提供的那段combobox的代码是不能新输入内容的,不知道有没有办法改成既可以输入内容又可以选择的combobox。
10 楼 surelei 2010-08-21  
你好,waiting!你的修改对我非常有帮助,不过我想请教下,如何才能修改选择按钮的大小?
非常感谢!
9 楼 waiting 2010-08-12  
yiqingxiao 写道
不错,之前试过,存在几个问题,fx 下不支持中文,下拉列表超长时,不自动滚动条的问题,都解决了,谢谢了

更新了0812版,基于jQuery.UI v1.84。新增了直接输入匹配字符的功能。兄弟试试看。

相关推荐

    jQuery ui Combobox 扩展

    **jQuery UI Combobox扩展**是基于流行的JavaScript库jQuery和其UI框架jQuery UI的一个自定义组件。这个扩展将传统的HTML `&lt;select&gt;` 元素转化为一个功能更丰富、交互性更强的下拉框,提供了更好的用户体验。它结合...

    jquery实现autocomplete插件(文本框下拉选项).zip

    总结,jQuery实现的Autocomplete插件大大简化了文本框下拉选项的开发过程,通过合理的配置和扩展,可以适应各种复杂的业务场景。通过学习并实践这个插件,开发者能够提升Web应用的用户体验,实现更加智能化、人性化...

    使用JQuery UI完成可输入内容且自动匹配的的下拉列表

    `autocomplete`方法设置了数据源和`select`事件处理函数,当用户从建议列表中选择一个项时,它会更新输入框的值。`combobox`方法将普通的`autocomplete`转换为具有下拉列表外观的组合框。 通过这种方式,我们创建了...

    jquery complete

    Autocomplete还可以与其他jQuery UI组件结合使用,比如Combobox。此外,还可以通过自定义事件和方法扩展其功能,例如添加异步加载数据的能力,或实现分页、过滤等高级特性。 **总结** jQuery Autocomplete是提升...

    240多个jQuery UI插件

    - **jQuery ComboBox**: 创建可搜索的下拉列表。 - **jQuery controlled dependent (or Cascading) Select List**: 支持多级联动选择。 - **Multiple Selects**: 支持多选下拉列表。 - **Select box ...

    240多个jQuery插件

    1. jQuery Combobox:组合框插件,提供下拉列表和文本输入功能。 2. jQuery controlled dependent (or Cascading) Select List:联动下拉列表。 3. Multiple Selects:多选下拉框。 4. Select box manipulation:...

    240多个jQuery插件.doc

    jQuery不仅本身提供了丰富的API和强大的功能,还拥有大量的第三方插件,这些插件极大地扩展了jQuery的功能范围,使得开发者可以轻松地添加复杂的功能到自己的项目中,如动画、表单验证、文件上传等。下面将详细介绍...

    jquery插件表

    - **jQuery Combobox**:将下拉列表转换为组合框,提高用户选择效率。 - **jQuery controlled dependent (or Cascading) Select List**:创建级联选择框,实现数据联动。 - **Multiple Selects**:支持多选功能的...

    JQuery应用实例学习(强烈推荐)转载.doc

    对于表单的下拉框,jQuery Combobox 和 jQuery controlled dependent (or Cascading) Select List 等插件可以实现更高级的功能,如联动选择和多选。 此外,jQuery 还提供了许多其他工具,如时间、日期和颜色选取...

    jQuery常用操作

    为了方便开发者,jQuery社区开发了许多插件,例如`jQuery UI Autocomplete`或`Chosen.js`,它们可以快速实现Combobox功能,且具有丰富的自定义选项和良好的用户体验。 7. **Ajax交互(Ajax Interactions)**: 当...

    JQuerry 插件介绍

    jQuery 插件是一种扩展jQuery库功能的工具,它们通常是开发者为了解决特定问题或增加特定功能而创建的。这些插件极大地丰富了jQuery的功能,使得前端开发变得更加高效和便捷。以下是一些常见的jQuery插件及其用途: ...

    海量经典的jQuery插件集合

    jQuery ComboBox** - **功能概述**:增强下拉列表功能。 - **应用场景**:提供更好的用户交互体验。 **2. jQuery controlled dependent (or Cascading) Select List** - **功能概述**:实现级联选择功能。 - **...

    可填写js combox

    在实际项目中,JavaScript ComboBox还可以与其他技术结合,比如使用Ajax异步加载选项,或者配合Autocomplete功能提高输入效率。总之,理解并掌握JavaScript ComboBox的实现原理和最佳实践,能够帮助开发者创建更友好...

    强烈推荐240多个jQuery插件提供下载

    在本文中,我们将探讨一些强烈推荐的jQuery插件,这些插件可以极大地扩展jQuery的功能,帮助开发者提高工作效率并创建功能丰富的网页应用。 **文件上传**: - **Ajax File Upload** 提供了无刷新的文件上传功能,...

    c#可输入的下拉列表框

    在Web应用中,类似的功能可能通过HTML5的`&lt;select&gt;`元素配合`&lt;option&gt;`标签和JavaScript实现,或者使用第三方库如jQuery UI的`Autocomplete`插件,提供类似的功能。 总之,"C#可输入的下拉列表框"是一种强大且灵活...

Global site tag (gtag.js) - Google Analytics