<!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>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
<!--
var searchReq = createReq();
/**//* 创建XMLHttpRequest的第一种方法
try{
searchReq = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e){
try{
searchReq = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e){
try{
searchReq = new XMLHttpRequest();
}
catch(e)
{}
}
}
*/
//创建XMLHttpRequest的第二种方法
function createReq(){
var httpReq;
if(window.XMLHttpRequest){
httpReq = new XMLHttpRequest();
if(httpReq.overrideMimeType){
httpReq.overrideMimeType('text/xml');
}
}
else if(window.ActiveXObject){
try{
httpReq = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e){
try{
httpReq = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e){
}
}
}
return httpReq;
}
//发送HTTP请求，当输入框的内容变化时，会调用该函数
function searchSuggest(){
var str = escape(document.getElementById("txtSearch").value);
searchReq.open("get","search.php?searchText="+str,true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
//当 onreadystatechange 值变化时，会调用该函数
//注意searchSuggest()中的这一句searchReq.onreadystatechange = handleSearchSuggest;
function handleSearchSuggest(){
if(searchReq.readyState == 4){
if(searchReq.status == 200){
var suggestText = document.getElementById("search_suggest");
var sourceText = searchReq.responseText.split("\n");
if(sourceText.length>1){
suggestText.style.display="";
suggestText.innerHTML = "";
//显示搜索内容
for(var i=0;i<sourceText.length-1;i++) {
var s='<div onmouseover="javascript:suggestOver(this);"';
s+=' onmouseout="javascript:suggestOut(this);" ';
s+=' onclick="javascript:setSearch(this.innerHTML);" ';
s+=' class="suggest_link">' +sourceText[i]+'</div>';
suggestText.innerHTML += s;
}
suggestText.innerHTML +='<div class="closesearch" onclick="closeSearch();">关闭</div>';
}
else{
suggestText.style.display="none";
}
}
}
}
function suggestOver(div_value)
{
div_value.className = "suggest_link_over";
}
function suggestOut(div_value)
{
div_value.className = "suggest_link";
}
function setSearch(obj)
{
document.getElementById("txtSearch").value = obj;
var div = document.getElementById("search_suggest");
div.innerHTML = "";
div.style.display="none";
}
function closeSearch()
{
document.getElementById("search_suggest").style.display = 'none';
}
//-->
//搜索内容的和文本框保持一致
onload = function()
{
var w = document.getElementById("txtSearch").offsetWidth;
var h = document.getElementById("txtSearch").offsetHeight;
var t = document.getElementById("txtSearch").offsetTop;
var l = document.getElementById("txtSearch").offsetLeft;
var d = document.getElementById("search_suggest");
d.style.border = "1px solid #000";
d.style.width = (w-2) + "px";
d.style.position = "absolute";
d.style.left = l + "px";
d.style.top = (t+h) + "px";
}
</script>
<style type="text/css" media="screen">
body{
font: 11px arial;
margin:0; padding:0;
}
.suggest_link{
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over{
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
.closesearch {
cursor:hand;
float:right;
text-decoration:underline;
color:#0033CC;
}
</style>
</head>
<body>
<form id="frm" action="">
关键字： <input type="text" name="txtSearch" id="txtSearch" onkeyup="searchSuggest();" autocomplete="off" />
<input type="submit" name="btnSearch" id="btnSearch" value="搜索" />
<br><div id="search_suggest" style="display:none">
</div>
</form>
</body>
</html>
-----SERVER CODE-----
<?php
header('Content-type: text/html; charset=utf-8');
$searchvalue = $_GET['searchText'];
$conn = mysql_connect('localhost', 'root', 'dingran');
if (!conn) {
return false;
}
mysql_query("set names utf8");
mysql_select_db('menu');
$sql = "SELECT s_name FROM search WHERE s_name LIKE '%$searchvalue%'";
$result = mysql_query($sql, $conn);
$str = '';
while ($rows = mysql_fetch_array($result)) {
//$str = '';
$str .= $rows[0] . "\n";
}
echo $str;
?>