再谈“可输入的下拉框”，完全支持中文输入

记得前段时间大家对“可输入的下拉框”讨论的比较多，可惜的是最终都没能完美的支持中文，就我自己写的程序和看的另外几个跟帖的程序都只能支持IE下面的中文输入，其实这样的话，在现实中的实用价值并不大，试想一下，在firefox、chrome下面访问的话，都只能输入英文肯定让用户抓狂了。

楼主当时的办法是扩展事件处理函数，这个想法很赞，这里提供另外一种思路，原理其实也很简单：动态生成一个input，利用css叠放在相应的select上面，这样的话，只要元素的位置控制的好，能起到“以假乱真”的效果，很显然，支持中文，兼容性也非常好！

代码在附件里面，欢迎大家拍砖，如果能对代码进行优化，那就感激不尽了~

 

评论

4 楼 clone168 2009-10-26  

<p>楼上的想法很不错，这个我之前真的没想到，好，等我忙完这一段时间的finding job，以后一定贴出我的想法来！</p>

3 楼 yangsp1 2009-10-26  

但这样好像不支持像google baidu那种联想词的连动效果。。。。

输入一个字或词时，下拉框返回相应的一个或多个相关数据。

1：通过ajax返回的数据如何用select下拉框显示出来？
   A：难道先清除select中原来所有的数据吗？
   B：用div实现。（如果这样的话是不是完全可以不用select)

2：如果客户端select中已经保存了所有数据，你这种方法如何完全不用
   刷新请求服务器端。只用js实现联想词显示？ 并且进行中英文排序

我做过一个用ajax,pinyin4j.jar,div实现的。但代码做的相当混乱而且很不通用。

效果：1：输入词时：
      2：点击下拉图标时：

请教作者更好的解决方法。
谢了先。

2 楼 clone168 2009-09-07  

<div class="quote_title">tof.j 写道</div>
<div class="quote_div">IE6中有问题</div>
<p> </p>
<p>呵呵，那天由于疏忽，没有在IE下面测试，其实这里又遇到了IE下面那个select的经典问题~</p>
<p>我把代码进行了修复，不过由于时间关系，没有做进一步的优化处理</p>
<p>谢谢提醒！</p>

1 楼 tof.j 2009-09-07  

IE6中有问题