ajax,php和MySQL实现带Suggest功能的在线英语词典-PHP源码-php.cn

Table of Contents

2. [代码][PHP]代码

4. [代码][PHP]代码

Home

php教程

PHP源码

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

PHP中文网

May 25, 2016 pm 05:10 PM

php

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

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

5. [图片] printscreen1.png

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7316

Java Tutorial

1625

CakePHP Tutorial

1349

Laravel Tutorial

1261

PHP Tutorial

1208

Related knowledge

CakePHP Project Configuration Sep 10, 2024 pm 05:25 PM

In this chapter, we will understand the Environment Variables, General Configuration, Database Configuration and Email Configuration in CakePHP.

PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati

CakePHP Date and Time Sep 10, 2024 pm 05:27 PM

To work with date and time in cakephp4, we are going to make use of the available FrozenTime class.

CakePHP File upload Sep 10, 2024 pm 05:27 PM

To work on file upload we are going to use the form helper. Here, is an example for file upload.

CakePHP Routing Sep 10, 2024 pm 05:25 PM

In this chapter, we are going to learn the following topics related to routing ?

Discuss CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. CakePHP is based on a MVC-like architecture that is both powerful and easy to grasp. Models, Views, and Controllers gu

How To Set Up Visual Studio Code (VS Code) for PHP Development Dec 20, 2024 am 11:31 AM

Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c

CakePHP Creating Validators Sep 10, 2024 pm 05:26 PM

Validator can be created by adding the following two lines in the controller.

See all articles