有时候觉得百度那个输入内容就有提示的工具很神奇，它究竟是怎么做到的呢？以前在一个进销存系统中也做过这么个功能，但是远远不及百度的功能强大，百度可以输入首字母，关键字拼音，或关键字都可以匹配，有时在想，是不是百度把相同的关键字代码存了三遍（首字母、拼音、字符串），还是不知道。。。。
下面贴出以前写的一个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 stubsuper.init();}protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// TODO Auto-generated method stubthis.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 stubsuper.destroy();}}
会继续跟进这项技术，需要源代码留邮箱
