ajax,php和MySQL实现带Suggest功能的在线英语词典
程序员文章站
2022-06-07 08:43:40
...
1. [代码][PHP]代码
<?
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]代码
<?
/////////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
<?
///////////词典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]代码
<!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()">
<p id="main">
<p id="suggest">
<table width="421" height="273" border="0">
<tr id="10" onmouseover="float(this)">
<td id="0"> </td>
</tr>
<tr id="11" onmouseover="float(this)">
<td id="1"> </td>
</tr>
<tr id="12" onmouseover="float(this)">
<td id="2"> </td>
</tr>
<tr id="13" onmouseover="float(this)">
<td id="3"> </td>
</tr>
<tr id="14" onmouseover="float(this)">
<td id="4"> </td>
</tr>
<tr id="15" onmouseover="float(this)">
<td id="5"> </td>
</tr>
<tr id="16" onmouseover="float(this)">
<td id="6"> </td>
</tr>
<tr id="17" onmouseover="float(this)">
<td id="7"> </td>
</tr>
<tr id="18" onmouseover="float(this)">
<td id="8"> </td>
</tr>
<tr id="19" onmouseover="float(this)">
<td id="9"> </td>
</tr>
</table>
</p>
<p id="outerf">
<p id="rstf"></p>
</p>
<p id="btn" onmouseover="btnani()" onclick="searchw()"></p>
<p id="inputf">
<label for="word"></label>
<input type="text" onkeyup="suggest()" name="word" id="word" value="" />
</p>
</p>
</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>
5. [图片] printscreen1.png