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

最新推荐文章于 2024-04-18 13:51:27 发布

tianwei3

最新推荐文章于 2024-04-18 13:51:27 发布

阅读量7.7k

点赞数

本文链接：https://blog.csdn.net/tianwei3/article/details/78355200

版权

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

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();


%>

tianwei3

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML------简单的搜索框自动弹出内容提示

最近研究了下百度搜索前的自动弹出提示联想，特地记下来防止忘记HTML页面笔记搜索前内容提示/* 提示div的样式 */#suggest { width:100px; border:1px solid black; font-size:14px;}/* 提示信息鼠标覆盖时信息 */div.over { border:1p
复制链接

扫一扫