HTML------简单的搜索框自动弹出内容提示

来源：互联网发布：华南师范大学网络平台编辑：程序博客网时间：2024/05/21 17:09

最近研究了下百度搜索前的自动弹出提示联想，特地记下来防止忘记

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'onmouseover=\"this.className='over'\" onmouseout = \"this.className='out'\" onclick=\"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 onload="readInfo()"><div ><h1>搜索前内容提示</h1><span><b>百度搜索</b></span><input type="text" name="info" id="info" style="width:362px" onkeyup="resetReading()"><input type="button" value="百度一下" onclick="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();%>

阅读全文

0 0