仿google suggest

最新推荐文章于 2021-08-06 11:16:48 发布

smile678910

最新推荐文章于 2021-08-06 11:16:48 发布

阅读量671

点赞数

本文链接：https://blog.csdn.net/smileboy007/article/details/9991935

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

smile678910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿google suggest

找很很久最后使用jquery.autocomplete实现google suggest效果,做出的最终效果如下图：其中index.jsp内容如下: .search-input { PADDING-RIGHT: 2px; PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; W
复制链接

扫一扫