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

jQuery Combobox 扩展 （select+autocomplete）20110730更新

jQueryautocomlete 
阅读更多

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
踩
分享到：
| rsync 简明教程
评论
48 楼 13253375009 2015-04-22  
怎样让下拉列表自动加入滚动条
47 楼 liangliang211 2014-09-30  
uronx 写道
<select id="combobox">
<option value="">请选择</option>
<optgroup label="A">
<option value="aae">AA</option>
<option value="anjie">安全</option>
<option value="anxinda">安好</option>
<option value="aramex">Abc</option>
</optgroup>

如果像这样的select 要如何实现？


我也需要这样的 请问解决了吗？
46 楼 uronx 2013-11-29  
<select id="combobox">
<option value="">请选择</option>
<optgroup label="A">
<option value="aae">AA</option>
<option value="anjie">安全</option>
<option value="anxinda">安好</option>
<option value="aramex">Abc</option>
</optgroup>

如果像这样的select 要如何实现？
45 楼 鲁愚平 2013-07-13  
yiqingxiao 写道
不错，之前试过，存在几个问题，fx 下不支持中文，下拉列表超长时，不自动滚动条的问题，都解决了，谢谢了

请问具体的解决方法啊，谢谢
44 楼 fengliu11911 2012-11-24  
langwolf 写道
$( "#submissiounit" ).combobox({
        size: 20,       
        delay: 200, 'title': '显示所有',
        change: function() { alert("changed");}
    });
这样写对吗？

这样写好像没有响应。。。

楼主什么时候现身，请解答一下，select或者change事件如何触发？
谢谢。
43 楼 lk617238688 2012-08-23  
langwolf 写道
请教一下：

下拉列表中，选中一条记录后，触发一个动作。即select的onchange

在该组件中如何使用呢？

谢谢

嗯 同问
42 楼 langwolf 2012-08-20  
$( "#submissiounit" ).combobox({
        size: 20,       
        delay: 200, 'title': '显示所有',
        change: function() { alert("changed");}
    });
这样写对吗？
41 楼 langwolf 2012-08-20  
请教一下：

下拉列表中，选中一条记录后，触发一个动作。即select的onchange

在该组件中如何使用呢？

谢谢
40 楼 path123 2012-08-14  
waiting 写道
path123 写道
你好，我用combobox遇到一个问题。
在查询页面，选中一条记录，想看这条记录的详细信息（city字段为下拉框），下拉框中的值都显示出来了，但所选中的记录（属性city）的值也赋值了，但在编辑页面就是显示不出。
用普通的HTML的SELECT，显示是正常的。
不知道什么原因，有点郁闷

不知道你说的‘编辑页面’和查询页面有啥区别


“查询页面”只能看到基本信息，“编辑页面”是可以看到所有信息，可以修改其中的属性值
39 楼 waiting 2012-08-14  
path123 写道
你好，我用combobox遇到一个问题。
在查询页面，选中一条记录，想看这条记录的详细信息（city字段为下拉框），下拉框中的值都显示出来了，但所选中的记录（属性city）的值也赋值了，但在编辑页面就是显示不出。
用普通的HTML的SELECT，显示是正常的。
不知道什么原因，有点郁闷

不知道你说的‘编辑页面’和查询页面有啥区别
38 楼 path123 2012-08-14  
你好，我用combobox遇到一个问题。
在查询页面，选中一条记录，想看这条记录的详细信息（city字段为下拉框），下拉框中的值都显示出来了，但所选中的记录（属性city）的值也赋值了，但在编辑页面就是显示不出。
用普通的HTML的SELECT，显示是正常的。
不知道什么原因，有点郁闷
37 楼 waiting 2012-07-28  
hudini 写道
請問有測試過 jquery 1.7 嗎?

剛在 jqery 1.7.2 下跑, Chrome正常, 但在 IE 下的話

_Create 裡 size = self.options.size || '' 這行會導致 jquery crash
, 畫面跑不出來

我目前是改成預設 option size=20, size = self.options.size
不知是否有更好的做法? 謝謝!

Chrome + IE Tab, IE 9 皆會導致此情形發生!


不好意思尚未有时间在jquery1.7+上作测试。
36 楼 hudini 2012-07-26  
請問有測試過 jquery 1.7 嗎?

剛在 jqery 1.7.2 下跑, Chrome正常, 但在 IE 下的話

_Create 裡 size = self.options.size || '' 這行會導致 jquery crash
, 畫面跑不出來

我目前是改成預設 option size=20, size = self.options.size
不知是否有更好的做法? 謝謝!

Chrome + IE Tab, IE 9 皆會導致此情形發生!
35 楼 waiting 2012-04-11  
lk617238688 写道
如果是需要感知输入后从数据库模糊查（如大数据量时），能做到吗？

我是在jqueryUI的基础上修改的，如果原版支持这个也支持~
34 楼 lk617238688 2012-04-05  
如果是需要感知输入后从数据库模糊查（如大数据量时），能做到吗？
33 楼 waiting 2011-11-11  
ldbjakyo 写道
有个问题

IE8兼容模式，数据集合在1000~2000，点击‘展开’Button，屏幕左上角会先出现列表框，然后消失，随后列表框又会出现在下拉框位置


望给个回复


和浏览器有关不？
32 楼 ldbjakyo 2011-11-08  
有个问题

IE8兼容模式，数据集合在1000~2000，点击‘展开’Button，屏幕左上角会先出现列表框，然后消失，随后列表框又会出现在下拉框位置


望给个回复
31 楼 lk617238688 2011-09-13  
可以了，已处理。赞一个
30 楼 lk617238688 2011-09-13  
再有一问：第一个下拉框动态控制第二个（加有过滤功能）下拉框时，当第一个下拉框值改值，第二个下拉框值也跟着改变，但第二个下拉框的可输入框中还留着前一次可输入框的值？有什么办法让第二个下拉框的可输入框中只留当前<option>的第一个值？
29 楼 waiting 2011-08-05  
lk617238688 写道
再问个问题：点击下拉按钮，展开<option>同时却让页面重新加载了，为何？

是IE6么，非IE好像没这个现象。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics