找很很久最后使用jquery.autocomplete实现google suggest效果,做出的最终效果如下图:
其中index.jsp内容如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="${pageContext.request.contextPath}/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='${pageContext.request.contextPath}/jquery-autocomplete/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-autocomplete/jquery.autocomplete.css" />
<style type="text/css">
.search-input {
PADDING-RIGHT: 2px; PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; WIDTH: 300px; PADDING-TOP: 3px; HEIGHT: 20px
}
.search-submit {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; MARGIN-LEFT: 5px; PADDING-TOP: 4px
}
</style>
<script type='text/javascript'>
$(function() {
$('#keyWord').autocomplete("ajax.jsp", {
minChars:1,
scrollHeight: 300,
dataType:'json',
autoFill: false,
matchContains:true,
extraParams:{keyWord:function(){return $('#keyWord').val();}},
parse:function(data) {
var parsed = [];
for (var i = 0; i < data.length; i++) {
parsed[parsed.length] = {
data: data[i],
value: data[i].word,
result: data[i].word
};
} return parsed;
},
formatItem: function(row) {
return "<table width='300px'><tr><td align='left'>" + row.word + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + row.total + "个</font> </td></tr></table>";
}
});
});
</script>
</head>
<body>
<div id="target1" style="padding: 200px 400px;">
<div id="target2" style="padding-left: 100px;"><h1>My Search</h1></div>
<form autocomplete="off">
<table>
<tr>
<td>
<input name="keyWord" type="text" id="keyWord" class="search-input"/>
</td>
<td>
<input type="submit" value="搜索" class="search-submit" id="btn"/>
</td>
</tr>
</table>
</form>
</div>
<div id="maingrid"></div>
</body>
</html>
其中ajax.jsp内容如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.io.PrintWriter"%>
<%
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=UTF-8");
String keyWord = request.getParameter("keyWord");
if (keyWord != null && "".equals(keyWord)) {
keyWord = new String(keyWord.getBytes("ISO-8859-1"), "UTF-8");
}
PrintWriter pw = response.getWriter();
pw.write("[{\"word\": \"苹果\",\"total\": \"120000\" },{ \"word\": \"苹果 iphone4\",\"total\": \"100000\" } ]");
%>
其中jquery.autocomplete.js中196行至绑定部分结束用如下内容替换:
.bind("input", function() {//增加input绑定
onChange(0,true);
}).bind("unautocomplete", function() {
select.unbind();
$input.unbind();
//原代码
//$(input.form).unbind(".autocomplete");
//修改为如下代码
$(input.form).unbind(".autocomplete").bind("input", function() {
onChange(0, true);
});
});
jquery.autocomplete.css中46行用如下内容替换:
background-color: #2A90FF;