仿百度搜索（AJAX）

Posted 2020-07-30 By_The_Way

<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>