jquery 模拟类搜索框自动完成搜索提示功能
autopoint.js代码:
代码如下:
/*
* @date: 2010-5-22 21:42:15
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:类似GOOGLE搜索框提示功能
*/
(function($) {
$.fn.autopoint = function (options) {
defaults = {
url:options.url,
keyLeft : 37,//向左方向键
keyUp : 38,//向上方向键
keyRight : 39,//向右方向键
keyDown : 40,//向下方向键
keyEnter : 13,//回车键
listHoverCSS : 'jhover',//提示框列表鼠标悬浮的样式
tpl : '<div src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/autopoint-1.0.1.js"></script>
<script type="text/javascript">
$(function(){
$("input").autopoint({url:'http://localhost/xun/ajax.svl?method=getsearchhelp'});
});
</script>
<body>
<input type="text" size="50" />
<input type="text" size="50" />
</body>
servlet主要部分:
代码如下:
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("UTF-8");
String word = request.getParameter("word");
if(Utils.isBlank(word)) return;
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("word", word + "a1");
map1.put("view", 10);
Map<String, Object> map2 = new HashMap<String, Object>();
map2.put("word", word + "a2");
map2.put("view", 15);
Map<String, Object> map3 = new HashMap<String, Object>();
map3.put("word", word + "a3");
map3.put("view", 2);
array.add(JSONObject.fromObject(map1));
array.add(JSONObject.fromObject(map2));
array.add(JSONObject.fromObject(map3));
json.put("data", array);
PrintWriter out = response.getWriter();
out.print(json.toString());
out.close();
其中JSONObject和JSONArray类来自json-lib.jar,为了测试方便,是直接返回数据的,实际应用中可以替换为
从数据源查取数据.
