本文的内容基本来自itcast上的视频教程,所用示例也基本是那上面的例子
GoogleSuggest是一种搜索框常用的技术,也是Ajax的典型应用之一。这个功能看上去挺容易实现,可要实现的漂亮,还是要费一些功夫。要实现一个比较完整的Google Suggest功能,一般要实现下面这些功能:
- 获得用户在搜索框获取焦点的动作
- 响应每一个keyup事件,包括退格和回车
- 根据搜索框中的内容与后台进行交互,获得结果,放到一个tooltip里面
- 当用户用鼠标选择或者用键盘上移,下移键进行操作时,响应用户操作,并且当上移出界时,要返回到底部
- 当用户点击搜索或按回车时,要消除搜索框
这些只是对功能的大概描述,要真正实现这些功能,恐怕还有很多未知的问题要解决。使用jQuery可以帮助我们更轻松地实现这些功能,使用jQuery来做Google Suggest的步骤如下:
- 创建一个html页面,包括一个输入框和一个div,这个div正是用来做tooltip的
- 创建服务器端对请求的响应文件,核心是返回一个xml文件
AutoComplete.java
wordxml.jsp
- 创建js来实现GoogleSuggest功能
里面用了jQuery的几个很好用的函数,分别是:
- 创建节点:$("<div>")
- 追加节点:appendTo()