社区 学习 工具库 休闲
搜索
简体中文
首页 > php教程 > PHP源码 > 正文

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

PHP中文网
发布： 2016-05-25 17:10:59
原创
1953 人浏览过

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=&#39;".$word."&#39;";
$rst=mysql_query($sqlstr);
list($word,$exp)=mysql_fetch_row($rst);
echo &#39;
<em>&#39;.$word.&#39;</em><br/><p>&#39;.$exp.&#39;</p>
&#39;;
if($word==&#39;&#39;){
echo &#39;
<p>查无记录……</p>
&#39;;
	}
?>
登录后复制


2. [代码][PHP]代码

<?
/////////linkdb.php//////////
/////////link database///////
$mydb=mysql_pconnect(&#39;localhost&#39;,&#39;root&#39;,&#39;lijun&#39;);
mysql_query("SET NAMES &#39;utf8&#39;");
if(!$mydb)
{
	//echo "连结失败....";
}else{
	//echo "连接成功....";
}
$db=mysql_select_db(&#39;mydatautf8&#39;,$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 &#39;".$word."%&#39;";
$rst=mysql_query($sqlstr);
$i=0;
$w[&#39;0&#39;]=&#39;&#39;;
$w[&#39;1&#39;]=&#39;&#39;;
$w[&#39;2&#39;]=&#39;&#39;;
$w[&#39;3&#39;]=&#39;&#39;;
$w[&#39;4&#39;]=&#39;&#39;;
$w[&#39;5&#39;]=&#39;&#39;;
$w[&#39;6&#39;]=&#39;&#39;;
$w[&#39;7&#39;]=&#39;&#39;;
$w[&#39;8&#39;]=&#39;&#39;;
$w[&#39;9&#39;]=&#39;&#39;;
while(($row=mysql_fetch_row($rst))&&$i<=9){
	list($w[&#39;&#39;.$i.&#39;&#39;])=mysql_fetch_row($rst);
	$i++;
	}
echo $w["0"].&#39; &#39;.$w["1"].&#39; &#39;.$w["2"].&#39; &#39;.$w["3"].&#39; &#39;.$w["4"].&#39; &#39;.$w["5"].&#39; &#39;.$w["6"].&#39; &#39;.$w["7"].&#39; &#39;.$w["8"].&#39; &#39;.$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=&#39;visiable&#39;;
	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(&#39;&#39;+i+&#39;&#39;).innerHTML=(arr[i]=(arr[i])?arr[i]:&#39;&#39;)+&#39;&#39;;
		}
	}
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=&#39;visible&#39;;
	document.getElementById("word").onblur=function(){
		if(msInSug==1){
			document.getElementById("suggest").style.visibility=&#39;hidden&#39;;
			}
		}
	}
//////////鼠标离开Sug/////////
function msoutsug(){
	msInSug=0;
	}
//////////鼠标选择////////////
function mschoose(ite){
	//各建议项的click事件
	//alert("事件来自："+ite);
	//正则处理
	var str=ite.innerHTML;
	var reg1=/>\w+</;
	var str1=str.match(reg1);
	str1+=&#39;&#39;;//匹配结果不能直接拿来当作被匹配字符串，要先将其转换为字符串
	var reg2=/\w+/;
	var str2=str1.match(reg2);
	document.getElementById("word").value=(str2=(str2==&#39;null&#39;)?&#39;&#39;:str2);//////////////
	}
///////开始查询//////////////
///////////////////////////
function searchw(){
	check();
	var word=document.getElementById("word").value;
	try{xmlhttp1=new XMLHttpRequest;}catch(e){
		try{xmlhttp1=new ActiveXObject(&#39;microsoft,xmlhttp&#39;);}catch(e){
			xmlhttp1=new ActiveXObject(&#39;msxml2,xmlhttp&#39;);
			}
		}
	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=&#39;-40px 0&#39;;
	document.getElementById("btn").onmouseout=function(){this.style.backgroundPosition=&#39;0 0&#39;;}
	}
function check(){
	if(document.getElementById("word").value==&#39;&#39;){
		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+&#39;&#39;);
				t++;
				float(ite);
				document.getElementById(t+&#39;&#39;).onmouseout;
				}else if(event.keyCode==38){
					if(t<10){t=10;}
					var ite=document.getElementById(t+&#39;&#39;);
					t--;
					}
		}
</script>
登录后复制

           

5. [图片] printscreen1.png    

           

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

相关标签：
php
来源：php.cn
上一篇：PHP根据图片色界在不同位置加水印的方法 下一篇：靠频繁刷新实现的图片数字时钟，很傻的方法，仅供娱乐。。。
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
来自于 2024-04-06 22:09:02
0
1
1428
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
来自于 2024-04-06 22:03:59
0
1
990
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
来自于 2024-04-06 21:55:20
0
1
778
使用opentbs生成odt文件时遇到的问题：相同key的值显示在同一行而不是单独的列中。 我正在使用一个名为OpenTbs的库来使用PHP创建odt，我使用它是因为动态生成列和行。我知道如何创建行和列，但我不知道如何组织它们。让我添加一个例子：所以首先我会将其添加到我的...
来自于 2024-04-06 20:18:18
0
1
483
按照ID对MySQL结果进行分组以便循环遍历 我有一个表，其中有mysql中的航班数据。我正在编写一个php代码，它将使用codeigniter3对数据进行分组和显示journey_idair_idFlightDuration...
来自于 2024-04-06 17:27:56
0
1
406
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板