有时候觉得百度那个输入内容就有提示的工具很神奇，它究竟是怎么做到的呢？以前在一个进销存系统中也做过这么个功能，但是远远不及百度的功能强大，百度可以输入首字母，关键字拼音，或关键字都可以匹配，有时在想，是不是百度把相同的关键字代码存了三遍（首字母、拼音、字符串），还是不知道。。。。
下面贴出以前写的一个demo代码，只是实现了文本框获取焦点回车出现提示，使用jquery实现，关于提示条目数量，样式，或者提示后面添加一个搜索结果数量，都可以自己调试出来实现。这个功能最开始是由于进销存系统的物品名称代码输入出现提示。
效果图
代码清单一：index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="jquery.1.4.2.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#usName").bind($.browser.msie? "propertychange": "change",function (){
var url= "ajaxTest";
var id= "#usName";
var keyValue= $("#usName").val();
ajax(id,url,keyValue);});
$("#ame").bind($.browser.msie? "propertychange":"change",function (){
var url= "ajaxTest";
var id= "#ame";
var keyValue= $("#ame").val();
ajax(id,url,keyValue);});
$("#yy").bind($.browser.msie? "propertychange": "change",function (){
var url= "ajaxTest";
var id= "#yy";
var keyValue= $("#yy").val();
ajax(id,url,keyValue);});
$("#ss").bind($.browser.msie? "propertychange": "change",function (){
var url= "ajaxTest";
var id= "#ss";
var keyValue= $("#ss").val();
ajax(id,url,keyValue);});
$("#dd").bind($.browser.msie? "propertychange": "change",function (){
var url= "ajaxTest";
var id= "#dd";
var keyValue= $("#dd").val();
ajax(id,url,keyValue);});
});
</script>
</head>
<body>
<input type="text" name="usName" id="usName"/>
<input type="text" name="ame" id="ame"/>
<input type="text" name="yy" id="yy"/>
<input type="text" name="ss" id="ss"/>
<input type="text" name="dd" id="dd"/>
</body>
</html>
框框多了点 好丑吧，
代码清单2：导入的js文件 其实就是对HTML操作，给文本框定位，取到数据后在位置处下方创建表格（即提示的数据）
var line = 0;
function del() {
if ($("#newDiv")) {
$("#newDiv").remove();
line = 0;
}
}
$(document.body).click(function () {
del();
});
function ajax(id, url, keyValue) {
$(document.body).click(function(){
del();
});
var top = $(id).offset().top;
var left = $(id).offset().left;
var newDiv = $("<div/>").width($(id).width() + 6).css("position", "absolute").css("backgroundColor", "white").css("left", left).css("top", top + $(id).height() + 6).css("border", "1px solid blue").attr("id", "newDiv");
var table = $("<table border='1' width='100%'/>").attr("cellpadding", "0").attr("cellspacing", "0");
$.post(url, {key:keyValue}, function (data) {
for(var i=0;i<data.result.length;i++){
var item = data.result[i];
var key = item.key;
var count = item.count;
var tr = $("<tr/>").css("cursor","pointer").mouseout(function(){
$(this).css("backgroundColor","white").css("color","black");
}).mouseover(function(){
$(this).css("backgroundColor","blue").css("color","white");
}).click(function(){
$(id).val($(this).find("td").eq(0).html());
del();
});
var td = $("<td/>").html(key).css("fontSize","12px").css("color","green").css("margin","5 5 5 5");
tr.append(td);
table.append(tr);
newDiv.append(table);
}
});
$(document.body).append(newDiv);
if(id.val()==""){
$("#newDiv").remove;
}
}
代码清单3：Ajaxtest.java 后台取到的数据以及接收的数据，这里是假数据
package com; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; public class Ajaxtest extends HttpServlet { public void init() throws ServletException { // TODO Auto-generated method stub super.init(); } protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub this.doGet(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/json;charset=utf-8"); req.setCharacterEncoding("utf-8"); PrintWriter out = resp.getWriter(); String key = req.getParameter("key"); System.out.println(key); //生成一个JSONObject对象 String data = "{}"; JSONObject jsonObj = JSONObject.fromObject(data); List<Map> list = new ArrayList<Map>(); Map<String,Object> map = new HashMap<String, Object>(); map.put("key", "1"); list.add(map); map = new HashMap<String, Object>(); map.put("key", "2"); list.add(map); map = new HashMap<String, Object>(); map.put("key", "3");; list.add(map); map = new HashMap<String, Object>(); map.put("key", "4"); list.add(map); map = new HashMap<String, Object>(); map.put("key", "5"); list.add(map); map = new HashMap<String, Object>(); map.put("key", "6"); list.add(map); jsonObj.put("result", list); System.out.println(jsonObj.toString()); out.print(jsonObj.toString()); //这里应该从词库中查找，我在这里就做了假数据了 out.flush(); out.close(); } public void destroy() { // TODO Auto-generated method stub super.destroy(); } }
会继续跟进这项技术，需要源代码留邮箱