ajax,php和MySQL实现带Suggest功能的在线英语词典

时间:2014-07-22 14:51来源: 作者: 点击: 次

分享到：

<?
include "linkdb.php";
header("Content-type:text/html;charset=utf-8");
$word=$_GET["word"];
$search=$_GET["searc"];
$sqlstr="SELECT * from word where word='".$word."'";
$rst=mysql_query($sqlstr);
list($word,$exp)=mysql_fetch_row($rst);
echo '
<em>'.$word.'</em><br/><p>'.$exp.'</p>
';
if($word==''){
echo '
<p>查无记录……</p>
';
	}
?>

2. [代码][PHP]代码跳至 [1] [2] [3] [4] [全屏预览]

<?
/////////linkdb.php//////////
/////////link database///////
$mydb=mysql_pconnect('localhost','root','lijun');
mysql_query("SET NAMES 'utf8'");
if(!$mydb)
{
	//echo "连结失败....";
}else{
	//echo "连接成功....";
}
$db=mysql_select_db('mydatautf8',$mydb);
if($db){
	//echo "数据库连接正确...";
}else{
	//echo "数据库连结错误....";
}
?>

3. [文件] dicsug.php ~ 604B 下载(24) 跳至 [1] [2] [3] [4] [全屏预览]

<?
///////////词典suggest响应页面/////////////
include "linkdb.php";
header("Content-type:text/html;charset=gb2312");
$word=$_GET["word"];
$sqlstr="SELECT word from word where word like '".$word."%'";
$rst=mysql_query($sqlstr);
$i=0;
$w['0']='';
$w['1']='';
$w['2']='';
$w['3']='';
$w['4']='';
$w['5']='';
$w['6']='';
$w['7']='';
$w['8']='';
$w['9']='';
while(($row=mysql_fetch_row($rst))&&$i<=9){
	list($w[''.$i.''])=mysql_fetch_row($rst);
	$i++;
	}
echo $w["0"].' '.$w["1"].' '.$w["2"].' '.$w["3"].' '.$w["4"].' '.$w["5"].' '.$w["6"].' '.$w["7"].' '.$w["8"].' '.$w["9"];
?>

4. [代码][PHP]代码跳至 [1] [2] [3] [4] [全屏预览]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>四级查词</title>
<style type="text/css">
#inputf {
	position: absolute;
	left: 10px;
	top: 9px;
	width: 419px;
	height: 33px;
	z-index: 1;
	border: #CCC 2px solid;
}
#word {
	background-color: #FFF;
	width:418px;
	height:32px;
	border:hidden 0;
	font-family:微软雅黑,Arial;
	font-size:24px;
}
#suggest {
	position: absolute;
	left: 10px;
	top: 46px;
	width: 421px;
	height: 273px;
	z-index: 3;
	border-right: #999 1px solid;
	border-bottom: #999 1px solid;
	border-left: #999 1px solid;
	font-size: 16px;
	font-family: 微软雅黑,Arial;
	visibility: hidden;
	cursor: default;
}
#outerf {
	position: absolute;
	margin: -100 auto;
	width: 605px;
	height: 300px;
	z-index: 2;
	border-radius: 10px;
	border: #0CF 1px solid;
	left: -76px;
	top: 59px;
	visibility: visible;
}
#rstf em{
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	color:#06F;
	}
#rstf p{
	font-family:楷体,微软雅黑;
	font-size:18px;
	}
#btn {
	position: absolute;
	left: 448px;
	top: 6px;
	width: 40px;
	height: 40px;
	z-index: 6;
	border-radius: 20px;
	background-image: url(image/%E6%90%9C.gif);
	background-position: 0 0;
	visibility: visible;
}
#main {
	position: relative;
	margin:0 auto;
	width: 442px;
	height: 366px;
	z-index: 5;
}
#rstf {
	position: absolute;
	left: 17px;
	top: 11px;
	width: 572px;
	height: 279px;
	z-index: 6;
}
#bt {
	position: absolute;
	left: 454px;
	top: 15px;
	width: 30px;
	height: 22px;
	z-index: 4;
	visibility: hidden;
}
</style>
<script type="text/javascript">
function init(){
	document.getElementById("btn").style.visibility='visiable';
	document.getElementById("bt").disabled=false;
	}
</script>
</head>

<body onload="init()">
<div id="main">
    <div id="suggest">
      <table width="421" height="273" border="0">
        <tr id="10" onmouseover="float(this)">
          <td id="0">&nbsp;</td>
        </tr>
        <tr id="11" onmouseover="float(this)">
          <td id="1">&nbsp;</td>
        </tr>
        <tr id="12" onmouseover="float(this)">
          <td id="2">&nbsp;</td>
        </tr>
        <tr id="13" onmouseover="float(this)">
          <td id="3">&nbsp;</td>
        </tr>
        <tr id="14" onmouseover="float(this)">
          <td id="4">&nbsp;</td>
        </tr>
        <tr id="15" onmouseover="float(this)">
          <td id="5">&nbsp;</td>
        </tr>
        <tr id="16" onmouseover="float(this)">
          <td id="6">&nbsp;</td>
        </tr>
        <tr id="17" onmouseover="float(this)">
          <td id="7">&nbsp;</td>
        </tr>
        <tr id="18" onmouseover="float(this)">
          <td id="8">&nbsp;</td>
        </tr>
        <tr id="19" onmouseover="float(this)">
          <td id="9">&nbsp;</td>
        </tr>
      </table>
    </div>
    <div id="outerf">
        <div id="rstf"></div>
    </div>
    <div id="btn" onmouseover="btnani()" onclick="searchw()"></div>

      <div id="inputf">
        <label for="word"></label>
        <input type="text" onkeyup="suggest()" name="word" id="word" value="" />
      </div>
      

</div>
</body>
</html>
<script type="text/javascript">
var msInSug=0;
function doit(str){
	//用正则表达式将获取是数据提取为数组或变量组并且填充到相应的表格内
	reg=/\b\w+\b/g;
	var arr=str.match(reg);
	for(i=0;i<10;i++){
		document.getElementById(''+i+'').innerHTML=(arr[i]=(arr[i])?arr[i]:'')+'';
		}
	}
function float(obj){
	obj.style.backgroundColor="#CCC";
	obj.onmouseout=function(){
		obj.style.backgroundColor="";
		};
	mschoose(obj);
	}
function suggest(){
	try{xmlhttp=new XMLHttpRequest;}catch(e){
		try{xmlhttp=new ActiveXObject("microsoft,xmlhttp");}catch(e){
			xmlhttp=new ActiveXObject("msxml2,xmlhttp");
			}
		}
	var word=document.getElementById("word").value;
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4&&xmlhttp.status==200){
			doit(xmlhttp.responseText);
			}
		};
	xmlhttp.open("GET","dicsug.php?word="+word);
	xmlhttp.send();
	document.getElementById("suggest").onmouseover=function(){msInSug=1};
	document.getElementById("suggest").style.visibility='visible';
	document.getElementById("word").onblur=function(){
		if(msInSug==1){
			document.getElementById("suggest").style.visibility='hidden';
			}
		}
	}
//////////鼠标离开Sug/////////
function msoutsug(){
	msInSug=0;
	}
//////////鼠标选择////////////
function mschoose(ite){
	//各建议项的click事件
	//alert("事件来自："+ite);
	//正则处理
	var str=ite.innerHTML;
	var reg1=/>\w+</;
	var str1=str.match(reg1);
	str1+='';//匹配结果不能直接拿来当作被匹配字符串，要先将其转换为字符串
	var reg2=/\w+/;
	var str2=str1.match(reg2);
	document.getElementById("word").value=(str2=(str2=='null')?'':str2);//////////////
	}
///////开始查询//////////////
///////////////////////////
function searchw(){
	check();
	var word=document.getElementById("word").value;
	try{xmlhttp1=new XMLHttpRequest;}catch(e){
		try{xmlhttp1=new ActiveXObject('microsoft,xmlhttp');}catch(e){
			xmlhttp1=new ActiveXObject('msxml2,xmlhttp');
			}
		}
	xmlhttp1.onreadystatechange=function(){
		if(xmlhttp1.readyState==4&&xmlhttp1.status==200){
			document.getElementById("rstf").innerHTML=xmlhttp1.responseText;
			}
		};
	xmlhttp1.open("GET","dictionary.php?searc=search&word="+word);
	xmlhttp1.send();
	}
</script>
<script type="text/javascript">
function btnani(){
	document.getElementById("btn").style.backgroundPosition='-40px 0';
	document.getElementById("btn").onmouseout=function(){this.style.backgroundPosition='0 0';}
	}
function check(){
	if(document.getElementById("word").value==''){
		alert("请输入单词！");
		return false;
		};
	}
</script>
<script type="text/javascript">
t=10;
	function bodyonload(){
		if(event.keyCode==13){
			document.getElementById("btn").onclick;
			}else if(event.keyCode==40){
				if(t>19){t=19;}
				var ite=document.getElementById(t+'');
				t++;
				float(ite);
				document.getElementById(t+'').onmouseout;
				}else if(event.keyCode==38){
					if(t<10){t=10;}
					var ite=document.getElementById(t+'');
					t--;
					}
		}
</script>