解决jquery.autocomplete在IE6下被下拉框遮住的问题

jquery.autocomplete是一个让人又爱又恨的东东，一直用得不错，可是用得越是深入就越是郁闷，这不，之前发现并解决了两个问题，这次又有问题找上我了。之前的两个问题分别是：《为jquery.AutoComplete添加触发事件》以及《如何让jquery.Autocomplete支持提示？》

在ie6以上的浏览器和firefox等浏览器上，jqury.autocomplete运行良好，可是到了ie6下，如果你碰巧又在使用jqury.autocomplete的控件下面放了一个下拉框（select元素），那么你将会看到一个很让人郁闷的问题，这是一个经典的问题。我们来看这个图：

20100201-1

oh, shit，多么让人难堪的场面，你想想，你需要让这样的网页展现你的用户面前吗？你希望让你网站的浏览者看到如此支离破碎的场吗？拜托，这实在太让人难为情了，要知道根据我网站的监测，ie6占居了访问者45.1%的份额，而实际上还要远远高于这个数，因为我的访问者基本上都是以技术人员为主，他们是技术应用的先锋。那么，这到底这是怎么回事呢？

如果一定要溯本清源的话，这得从ie6的bug说起，睢睢，ie6的bug实在太太太多了，其中最大宗罪就是不遵守html及css的标准，自搞一套标准，还了被firefox打得满头是包，自ie7开始已经开始变回乖孩子了，ie8更是与firefox几乎完全一样。由于国内win xp盛行，造成ie6占有率居高不下，所以我们必需考虑这个用户群体。

闲话休提，听我来表一表，这是因为ie6认为，下拉框是一个windows的标准控件，它的优先级要比div高，所以才会到div以上，不知道这算不算ie6的bug呢？或者算是一种无心之失吧。解决这个问题所说有5种，主要的有这么几种：

在显示div的时候，把select下拉框给隐藏了
把更高级的控件iframe放到div中，提升div的地位，是不是有点狐假虎威呢？
自己写一个模拟下拉框来替代select
最接弱智的办法，改变布局，让他们老死不相往来，不在一块总没事吧

知道解决方案就好办了，想知道更多的朋友可以google一下，关键字：div select，我们按下不表，且看我把代码再改一改。

jquery.autocomplete已经被我修改得满目疮痍面目全非了，我已经不能准确地说清楚是第几行了，请原谅我换另外一种方式吧，let’s go boy，找到 function init()，看到其中有行element = $(“<div>，没错，就是这行了。修改一下，我们要把iframe加到这里面来，完全的代码如下：

element = $("<div><iframe style='position: absolute; z-index: -1; width: 100%;
 height: 100%; top: 0;left: 0; scrolling: no;' frameborder='0' src='about:blank'>
</iframe><div class='ac_caption'>" + options.caption + "</div></div>")

其实就是在div中加上了个iframe了，嘿，简单吧，不过，到这儿还不算完，我们还需要做另一件事，就是把ac_results这个css样式添加一个固定高度，否则没办法起作用，实在抱歉，我目前还没有办法解决个问题，如果什么时候我解决了，再来向大家报告一下:P，来看修改后的效果吧：

20100201-2

本文来自涂雅[http://iove.net/]，原文链接：http://iove.net/archives/1512.html，网站转载请注明来源于涂雅并保留原文链接，否则视为侵权。

嗯，或者你也可以收听我的微博，腾讯微博(主要用这个，其他的看我的个人介绍)

我写博客常常出现错别字，常常错得还很离谱，有时候我自己看了第二遍都骂我自个儿，但我又不习惯重复审查，纠结啊...各位看到啥错别字或者不明白的地方，请给我留言指出来，感谢感谢。

6个评论在 "解决jquery.autocomplete在IE6下被下拉框遮住的问题"

Jacky
2011-4-2 16:45 回复TA

呵呵，你的网站做了很清爽，刚好也遇到这个问题，呵呵。谢了

青椒
2010-2-10 10:01 回复TA

博主我想加你QQ，我的是117281537，想向你学习

涂雅
2010-2-10 15:18 回复TA
我一般很少用qq，其实我不太明白你到底想实现什么样的效果
或者这样，你把代码发到我的邮箱，然后告诉我想做什么吧
我的邮箱conis.yi(at ) gmail.com，把中间的替换一下吧，防垃圾邮件的。

青椒
2010-2-10 09:34 回复TA

也实现不了，很感谢你，可以加你的QQ或者email吗？

青椒
2010-2-9 16:11 回复TA

博主你好，我想请教下这个自动完成控件，如果我设置option里的 mustMatch: true然后获得文本框 formatResult: function(row) {return “{0} {1}”.format(row[0],row[1]);}的值怎么自动被清空啦？
代码如下：
width: 246,
selectFirst: true,
autoFill: true,
minChars: 0,
scroll: true,
mustMatch: true,
matchContains: true,
formatItem: function(row, i, max) {
return ‘{0}{1}’.format(row[0], row[2]);
},
formatMatch: function(row, i, max) {
return “{0} {1}”.format(row[0],row[1]);
},
formatResult: function(row) {
return “{0} {1}”.format(row[0],row[1]);
}
希望能得到您的帮助，谢谢

涂雅
2010-2-9 22:41 回复TA
我想你设计了mustMatch这个参数，这个参数表示必需要匹配，比如说你的自动匹配没有北京，你输入一个北京，然后会清空，因为没有办法匹配
或者，你试试autoFill及selectfirst都为false吧