可输入的select

可输入的select在网上可以搜到很多实现方法，实现的基本原理可以分成以下两种：
1、利用DIV来模拟select
2、利用CSS的clip来切割select，使其只剩下一个选择三角，然后用一个input框来占据原有的select位置

第一种方法由于是完全使用div来模拟，所以在表现样式上十分灵活，但也正是因为这个原因，他带来了大量的CSS，而且可能还会引入图片（实现下拉框的三角按钮），另外由于全部由DIV实现，可能会在兼顾各个浏览器的显示方面多做很多工作。个人觉得这种方法并不是很好。

第二种利用了css的布局属性clip，由于其只是引入了一个input，而且真实的选择还是基于select，所以可控的东西会减少很多。

这个实现版本就是基于第二种原理，当然，在一些方面进行了改进，主要有：

1. 封装生成input的方法：利用一个js函数来将clip和生成input对象的过程进行封装，只需在每个select后调用一个js函数即可为select生成一个可输入的input框；
2. 利用父对象进行重定位：由于clip需要在对象的opsition属性设置为absliute的时候才能生效，这样会导致select脱离父对象，引起页面显示结构的错位。利用select的父对象的位置进行重新定位就可以解决这个问题；
3. 利用单态生成input：为页面每个select生成唯一的一个input框，关于input框的名字可以由用户制定，也可以由使用函数默认生成的名字；
4. 先后继承select的onchange方法：input框的值的变化是通过select的onchange事件来实现的，但是为了不影响页面中 select原有的onchange方法，可以利用attachEvent或addEventListener来对其onchange进行追加；
5. 动态调整父对象宽度：发现当table的td单元格在包含select的时候，当select被切割时，td的大小会发生变化（原因未知），使得显示变形。利用临时变量来记录select父对象原有大小，在切割成功后再重新划定其父对象的大小就可以解决这个问题；
6. ie表单唯一输入框的bug：在ie浏览器中，当form表单里只有一个input框时，用户在不点击submit按钮，而是直接回车来触发表单提交的情况下，input的onchange是不能被捕捉到的。只要利用js在input前再追加一个隐藏的匿名input框即可。在firefox下没有这个问题。在opera还没有解决这个问题；
7. 针对不同的浏览器选择不同的宽度、高度等css值：为了使得显示效果尽可能的相近，不得不做这方面的工作；

其实做这么多，只是为了让用户更透明的使用这个js方法，让用户在客户端基本感觉不到它的存在。

这种实现方法也有缺点，就是提交的表单名称与原来的select名称不同，而是多了一个input的表单值，这需要服务器端的脚本多做点工作来判断一下。

其他的方面还没有想到，大家有兴趣的话可以研究一下，多提宝贵意见～～