仿autoComplete输入联想且带分页 远程数据源（纯自创）

效果图：

仿写初衷：因为代码表的数据量太大了，用select做下拉列表和点击后弹框选择，都不太人性化了，再加上本人的一点点强迫症，再就jQuery autoCompete吧，它竟然分不了页，这下我蛋疼了，还非得强迫我自己写啊！

仔细想想，这功能要做的话，也不太难，就几个地方要考虑：

1.通过什么事件来刷新数据？

答案：通过文本框的onkeyup，监听onkeyup事件，即可将键入的值传到后台去进行模糊匹配

2.在用户到频率的输入下，怎样减少服务器的压力？

答案：通过timer定时器，设置当前只能有一个且唯一一个定时器，当定时器时满，则开始查询数据库

3.分页需要再重新查数据库吗？

答案：如果数据量很大，建议分页再重新查数据库

4.下拉列表用什么做？

答案：下拉列表用div来仿做，一行就是一个div，且id也必须规范为类似 item+数字 的形式，以便显示高亮选中状态

5.div行选中后怎么赋值？

答案：给每个div做一个onclick事件，函数为assignValue()

5.怎么通过键盘的上（↑）下（↓）键控制下拉列表框的上下移动，及其enter后选中并填充？

答案：监听文本框的onkeyup事件，设置一个全局变量curItemIndex（当前下拉框被选中的项目索引号），获取event的key值，比较key与38（上方向键的ASCII） 40（下方向键的ASCII），对应curItemIndex加一或减一，然后css，使其背景发生变化就可以了.enter后填充，则是通过curItemIndex定位div行，当前选中的div的id当然就是item+curItemIndex了，调用onclick事件就可以了。

在输入过程中监听input的onkeyup事件，500ms后查询数据库刷新下拉列表框，进行联想显示，且支持分页效果

index.jsp代码：

先加入我写的MyAutoComplete.js（最下面有下载链接）和MyAutoComplete.css（最下面有下载链接）以及DWR所需js文件

        <link href="css/myAutoComplete.css" rel="stylesheet" type="text/css" />
	<!-- DWR相关js文件 -->
	<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script><%--固定写法--%>
	<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/DwrServer.js"></script>
	<!-- 实现输入联想主要JS文件 -->
	<script type="text/javascript" src="jscript/myAutoComplete.js"></script>

index.jsp body部分

<!-- 仿jquery的autoComplete联想输入下拉列表框 -->
	<div id="newStackDiv" class="newStackDiv" style="disp