返回顶部

收藏

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

更多

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

[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>
';
    }
?>

[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 "数据库连结错误....";
}
?>

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"];
?>

[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()">
<div id="main">
    <div 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>
    </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>

printscreen1.png

imgs/asCode/27113611_bA4S.png

标签:MySQL

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. yanxinchi 发表 2018-10-25 07:25:43 JDK 并发 AQS 系列(四)
  2. admin 发表 2018-10-24 09:19:20 online-schema-change tool ddl problem
  3. TiuVe2 发表 2018-10-22 02:17:29 InnoDB 存储引擎之索引和优化
  4. Forece 发表 2018-10-20 02:40:25 记又一次通过查看日志解决服务器500内部错误(xmlrpc.php)
  5. sunny5156 发表 2018-10-18 09:36:10 mycat分片表全局自增主键测试
  6. xinlu 发表 2018-10-15 10:22:08 sql5.7报错
  7. sunny5156 发表 2018-10-12 06:01:45 MyCat 主键ID自增长配置
  8. 唐尤华 发表 2018-10-07 14:46:12 Ubuntu下面MySQL的参数文件my.cnf浅析
  9. fox64194167 发表 2018-10-03 12:17:40 mysql 显示当前执行的sql语句
  10. admin 发表 2017-07-20 09:42:20 MySQL主从配置尝试(同一台机器)
  11. admin 发表 2017-07-31 13:40:26 无备份情况下恢复MySQL truncate table
  12. admin 发表 2017-08-01 17:07:53 无备份情况下恢复MySQL drop table

发表评论