最近研究了下百度搜索前的自动弹出提示联想,特地记下来防止忘记
HTML页面笔记
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>搜索前内容提示</title>
<style type="text/css">
/* 提示div的样式 */
#suggest {
width:100px;
border:1px solid black;
font-size:14px;
}
/* 提示信息鼠标覆盖时信息 */
div.over {
border:1px solid #999;
background:#FFFFCC;
cursor:hand;
}
/* 提示信息鼠标移出时信息 */
div.out {
border: 1px solid #FFFFFF;
background:#FFFFFF;
}
</style>
<script type="text/javascript">
var xmlHttp;
var currentInfo="";
var counter=1;
var isReading = true;
function readInfo(){
var info =document.getElementById("info").value;
if(currentInfo==info && info!=""){
counter++;
}else{
currentInfo=info;
counter=1;
}
if(counter==3){
getSuggest(info);
isReading=false;
}else{
setTimeout("readInfo()", 200);
}
}
function resetReading(){
if(!isReading){
isReading=true;
readInfo();
}
}
function createXmlHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getSuggest(info){
createXmlHttp();
xmlHttp.open("GET", "suggest.jsp?info="+encodeURI(info),true);
xmlHttp.onreadystatechange = showSuggest;
xmlHttp.send(null);
}
function clearSuggest(){
document.getElementById("suggest").innerHTML ="";
}
function createSuggest(text){
var sDiv = "<div class='out'οnmοuseοver=\"this.className='over'\" onmouseout = \"this.className='out'\" οnclick=\"setSuggest(this)\">"+text+"</div>";
document.getElementById("suggest").innerHTML +=sDiv;
}
function displaySuggest(){
document.getElementById("suggest").style.display="";
}
function hiddentSuggest(){
document.getElementById("suggest").style.display="none";
}
function showSuggest(){
if(xmlHttp.readyState == 4){
clearSuggest();
var suggestsText = xmlHttp.responseText;
if(suggestsText !=""){
var suggests = suggestsText.split("|");
for (var i=0;i<suggests.length;i++){
createSuggest(suggests[i]);
}
displaySuggest();
}else{
hiddentSuggest();
}
}
}
function setSuggest(divObj){
document.getElementById("info").value=divObj.innerHTML;
hiddentSuggest();
}
function showInfo(){
alert("您要搜索的是:"+document.getElementById("info").value);
}
</script>
</head>
<body οnlοad="readInfo()">
<div >
<h1>搜索前内容提示</h1>
<span><b>百度搜索</b></span>
<input type="text" name="info" id="info" style="width:362px" οnkeyup="resetReading()">
<input type="button" value="百度一下" οnclick="showInfo()">
<!-- 用于显示提示信息的div -->
<div id="suggest" style="display:none;position:relative;left:69px;width:360px"></div>
</div>
</body>
</html>
JAVA 执行数据库笔记
<%@page import="java.sql.ResultSet"%>
<%@page import="ajax.db.ConnDB"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
out.clear();
String info = request.getParameter("info");
info=new String (info.getBytes("iso-8859-1"),"utf-8");
int counter = 0;
String sql = "select info from suggest_info where info like'"+info+"%'";
ConnDB connDB = new ConnDB();
ResultSet rs= null;
rs = connDB.doQuery(sql);
while (rs.next()){
if(counter > 0){
out.print("|");
}
counter++;
out.print(rs.getString(1));
if(counter == 10 ) break;
}
connDB.closeConnection();
%>