<h1>百度搜索</h1>
<!--建立一个DIV，其中包括一个文本输入框和一个按钮-->
<div id="sousuo">
<input type="text" id="txt"/><input type="button" id="btn" value="搜索" />
<!--再建一个DIV用于显示关键字查询出的数据-->
<div id="liebiao">
<ul></ul>
</div>
</div>
<!--建立一个TABLE表格，用于显示搜索内容的详细信息-->
<table id="tb" border="1" cellpadding="0" cellspacing="0" width="80%">
</table>
</body>
<!--用JQuery创建所需的事件-->
<script type="text/javascript">
$(document).ready(function(e) {
//文本输入自动索引事件
$("#txt").keyup(function(){
//定义变量接收文本框中的值
var txt=$("#txt").val();
//判断文本框中是否有内容，
if(txt.length>0)
{
//显示相似内容的详情
XanShi();
//列表内容长度大于0时，显示查询列表
$("#liebiao").show();
$("#tb").show();
//调用AJAX方法
$.ajax({
async:false, //更改为同步执行
url:"txtchuli.php",
data:{a:txt,bs:0}, //传递的数据中添加一条自定义属性，以便于区分在处理页面中执行哪种操作
type:"GET",
dataType:"TEXT",
success: function(data){
//将返回的字符串拆分成数组
var hang = data.trim().split("|");
//alert(hang);
var str = "";
//对数组中的每组数据进行遍历
for(var i=0;i<hang.length;i++)
{
str = str+"<li class='aa'>"+hang[i]+"</li>";
}
//将遍历出的数据放入页面中显示
$("ul").html(str);
}
})
}
else
{
//如果文本框中内容长度不大于0则隐藏该列表
$("#liebiao").hide();
$("#tb").hide();
}
//鼠标经过事件
$(".aa").mouseenter(function(){
//初始化所有UL的背景色
$(".aa").css("background-color","white");
//改变经过的UL的背景色
$(this).css("background-color","#F00");
//设置鼠标样式
$(this).css("cursor","pointer");
})
//鼠标离开事件
$(".aa").mouseleave(function(){
//改变离开的 UL的背景色
$(this).css("background-color","white");
})
//鼠标点击选中事件
$(".aa").click(function(){
//取到被选中的项的内容，放入变量top中
var top=$(this).text();
//将取到的内容放入文本框中
$("#txt").val(top);
//隐藏查询列表
$("#liebiao").css("display","none");
//选中后显示选中内容的详细情况
XanShi();
})
})
});
//创建一个显示详情的事件
function XanShi(){
var txt= $("#txt").val();
$.ajax({
async:false, //更改为同步执行
url:"txtchuli.php",
data:{a:txt,bs:1}, //传递的数据中添加一条自定义属性，以便于区分在处理页面中执行哪种操作
type:"GET",
dataType:"TEXT",
success: function(data){
//拆分传回的数据，得到每行的数据
var hang =data.trim().split("|");
//创建表格初始内容
var str="<tr><td>地区编号</td><td>地区名称</td><td>上级地区编号</td></tr>";
//对拆分后的数据进行循环遍历
for (var i=0;i<hang.length;i++)
{
//将每行数据再拆分出每列的数据
var lie=hang[i].split("^");
//创建拼接表格数据
str=str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td></tr>"
}
//将拼接好的数据带回到页面中显示
$("#tb").html(str);
}
})
}
</script>