一、实现功能：在表单中输入内容时，与输入内容有关的都显示出来。例如：输入a，带有a这个字母的都显示出来
二、思路步骤：
1、建立数据库，
2、建立表单（百度页面），当输入内容时，利用ajax技术把数据传输到服务器，就会从数据库中调出与输入相关的数据，从数据库中输出的数据转换成json格式的数据，利用ajax技术与json（responseText）把数据读出，构成百度搜索建议，
3、表单的内容等于当前点击的对象，选中对象时的颜色设置等
三、实例代码
1、ajax封装代码 ajax.js
function initXHR(){
//判断浏览器的版本
return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
}
function testXHR(serverUrl,Parms,callBack){
var xhr=initXHR();//初始化XHR
var url=serverUrl+"?"+Parms+"&r="+Math.random();//初始化url。serverUrl传送的文件。Parms参数
xhr.open("GET",url,true);//打开url
xhr.send(null);//发送请求
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
callBack(xhr);//callback回调函数,自动执行，函数执行完后会给主程序一个响应
}
}
}
2、baidu.html
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<script language="javascript" type="text/javascript">
function testAjax(str){
//var str = document.getElementById("search_text").value;
testXHR('baidu.php',"c="+encodeURI(str),m_xhr);//testXHR函数应与ajax.js里的函数名保持一致
}
function m_xhr(xhr){//xhr是个保存XMLHttpRequest对象的xhr变量(必须有)
var str="";
var json=eval("("+xhr.responseText+")");
for(var i=0;i<json.length;i++)
str+='<span style="position:absolute left:0" id="s1" οnclick="choose(this)" οnmοuseοver="onit(this)" οnmοuseοut="outit(this)">'+json[i].text+'</span><br>';
document.getElementById("div").innerHTML=str;
}
function choose(obj){//obj是用this传递过来的当前点击对象
document.getElementById("search_text").value=obj.innerHTML;//将选择的内容在文本框中进行填充
document.getElementById("div").innerHTML="";//清空搜索建议的内容
document.getElementById("div").style.border="none";//让搜索建议图层的边框消失
}
function onit(obj){
obj.style.backgroundColor="#36F";//选中时的颜色
}
function outit(obj){
obj.style.backgroundColor="#ccc";//离开选中时的颜色
}
</script>
</head>
<body>
<center>
<h1>百度一下，你就知道</h1><br>
<table><tr><td>
<form action="" method="post">
<input type="text" size="12" id="search_text" οnkeyup="testAjax(this.value)"></td><td>
<input type="submit" value="点击查询"></td>
</form></tr>
<tr><td>
<div style=" position:relative;background-color:#CCC"; border:dashed #666 1px" id="div">
</div>
</td></tr>
</table>
</center>
3、baidu.php
<?php
$jsonStr="";
$link=mysql_connect('localhost','root','123');
mysql_select_db('baidu',$link);
mysql_query('set names utf8');
if($_GET["c"]!=''){
$result=mysql_query("select content from c where content like '".$_GET["c"]."%'");
while($row=mysql_fetch_row($result)){
$jsonStr=$jsonStr.('{text:"'. $row[0].'"},');//构造json为数组字面量，其中每一个元素为一个json格式的对象字面量
}
$jsonStr=rtrim($jsonStr,',');//去除最右面的逗号
$jsonStr="[".$jsonStr."]";
echo $jsonStr;}//以数组字面量的形式将responseText返回
//需要将回传的数据用json表示（为了一行一行的遍历回传数据）
//对象字面量 var obj={属性名：属性值。。。}
//数组字面量var arr =[值1,值2...];值可以为任意类型的数据
?>
4159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
