仿google suggest

来源：互联网发布：centos无线网络配置编辑：程序博客网时间：2024/05/09 21:32

找很很久最后使用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;