类似google动态搜索提示

关于实现类似google动态搜索提示的问题，然后突然就自己想为什么不写成一个通用的组件呢？说到做到，呵，然后就马上开始写这个动态搜索提示的类了，当然是基于JS的AJAX应用咯。搜索的结果来源于服务器返回的结果，而又需要在页面上动态展现，所以前者需要AJAX实现，后者就需要使用JS来动态的在页面上呈现结果了。

    知道了使用什么技术来做，来说说如何做吧~~:-)。其实原理也还是比较简单的，如果没有想到好的思路的话，不妨参考一下俺的做法  。刚开始的时候是打算使用popup来做的，可后来试了下发现无法设置父窗口的输入框元素的值和无法支持鼠标点击等操作（或许是俺没有想到如何去做@_@），所以也就把这个做法作罢了，然后尝试使用其他的方法。呵，好了，废话了一的篇，开始讲讲如何实现这个效果。

    其实原理还是蛮简单的，就是使用一个DIV层来实现动态提示的效果，然后把搜索的结果放入到DIV中显示出来，当鼠标单击或上下箭头选中回车时把所选中的值赋值到输入框中去，这样就可以实现类似google的动态搜索提示效果了。我就以我写的这个JS类来说吧，比如我写的JS类是JSearcher，提供给外部的一个访问方法就是：search(urlStr, inputObj, triggerKey, searchNum, nodeName)。所以只需要在输入框的onkeypress事件上（注意不能用在onkeydown和onkeyup事件，原因后面来讲），这样写：

<input οnkeypress="JSearcher.search('/test.jsp?key='+this.value, this, ',', 10, 'Result')" />

    按照上面写的后就可以使用了，第一个参数urlStr是指你需要请求的URL地址（输入的值可以自行加在URL地址后做为一个参数传递过去，如上述的key参数）；第二个参数就是指当前的这个input输入框了，这里主要是定位DIV显示层到它的下方和设置所选中的值到它的value属性中去；第三个参数就是触发键了，即只有在输入框中输入逗号时才会触发向服务器发送请求的动作，当然你也可以只要一按键就触发请求，这里加是为了方便控制而已；第四个参数就是要解析的最大条目数；第五个参数就是服务器返回的XML数据流中的代表条目的节点的名称，一般会有多个这样的节点，由于服务器返回的是文本，所以使用XML数据流是最好的方式。

    上面写的是我写的一个JS类的调用方法，从中可以看出相应的实现方式。刚说了为什么不能使用在输入框的onkeydown和onkeyup事件上呢？这里主要是为了使用键盘的上下箭头来控制选择条目和选定条目的操作，而且也只有在onkeydown事件上才能确定用户所按的是哪个键。我们可以在内部为输入框附加一个onkeydown事件，这样使用：inputObj.attachEvent("onkeydown",yourFunc)。这样就可以为该输入框附加一个在onkeydown上的函数yourFunc了。使用上下箭头来控制，无非就是把显示在DIV中的某一行的数据选中或不选中，说到这里，我们要提一下放在DIV中的数据。我们可以使用表格来存放数据，每一搜索结果占用一行，一行一个单元格。这样当选中某一行时，同时把所有其他的行背景颜色全部改变成不被选中时的颜色，另外还可以在每一行上附加onmouseover和onmoueout事件以支持鼠标操作。这样在选中时就可以把背景色为选中时的颜色的那一行的单元格中的值设置到输入框的value属性中去，这样也就实现了鼠标和键盘的同时操作。

    其实这个动态搜索还有一个问题就是DIV的定位问题，就是如何使DIV总是出现在输入框的下方呢？这也是一个比较棘手的问题，呵呵，不过也不是什么拦路虎~ :-)。我们可以使用方法getBoundingClientRect获取对象（也就是输入框）的真实位置后，然后再设置DIV的style.top和style.left、style.width、style.height等属性就可以了，至于如何设置就不用我讲了吧，呵呵。还有一个问题需要注意的就是，在框架页中获取的实际位置在X轴和Y轴上都会存在+2或-2的偏移，这点也可以考虑进去~~

    好了，基本上该讲的部分也都讲了，看看俺的效果吧~~~~~  

图1 任意键触发

图2 数字键0触发

图3 任意键触发，只解析10个条目

图4 逗号键触发，使用textarea

    以上就是演示的几个效果，呵呵，怎么样呢？！鼠标单击或上下箭头选中后回车，所选中的值都会被设置到输入框中去。由于我这是演示，所以服务器返回的总是相同的数据，其实在实际应用中，应该是根据说输入的值去搜索，然后将搜索结果呈现出来。

   好了，这个东东已经讲完了，又费了半个多小时了，呵呵~~~~~