类似百度搜索建议

77 篇文章 0 订阅
本文介绍了一个简单的PHP实现百度风格的联想搜索功能。通过前端JavaScript触发AJAX请求,后端利用MySQL查询匹配用户输入的部分字符串并返回JSON格式数据。前端再将这些数据解析并展示出来。
摘要由CSDN通过智能技术生成

userController.class.php

public function baiduSuggestAction(){
  //命令模型层处理数据
  $data = $_REQUEST['val'];
  $userModel = new userModel("localhost","root","123","xsxx");
  $rows = $userModel ->selectAll($data);
  //var_dump($rows);
  //服务器想返回集合类的数据,需要使用json_encode()转化
  file_put_contents("d://test.txt",json_encode($rows),FILE_APPEND);
  echo json_encode($rows);
  //命令视图层显示数据
 }

 

 

userModel.class.php

<?php
class userModel extends baseModel{

public function selectAll($data){
  $sql = "select * from stu where sname like '{$data}%'";
  $result = mysql_query($sql);
  $rows = array();
  while($row = mysql_fetch_assoc($result)){
   $rows[] = $row;
  }
  return $rows;
 }
}

 

baidu.tpl

<script>
 function init(){
  document.getElementById('dv').style.display = "none";
 }
 function startAjax(obj){
  var xhr;
  if(window.ActiveXObject){
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
  }
  //在发送请求之前,需要知道服务器的地址
  var url = "index.php?c=user&a=baiduSuggest";
  xhr.open("post",url,true);
  //设置监听请求状态
  xhr.onreadystatechange = callback;
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xhr.send("val="+obj);
  function callback(){
   if(xhr.readyState ==4){
    if(xhr.status==200){
     var json = eval('('+xhr.responseText+')');
     var str = '';
     for(var i=0;i<json.length;i++){
      str += "<span>"+json[i].sname+"</span><br/>";
      document.getElementById("dv").style.display = "block";
      document.getElementById("dv").innerHTML = str;
     }
    }
   }
  }
 }
</script>
</head>

<body onLoad="init()">
<center>
<h3>百度一下,你就知道</h3>
<table>
<tr>
<td>
<form action="#" method="post">
<input type="text" size="30" id="search" onKeyUp="startAjax(this.value)" />
<div id="dv" align="left" style=" position:relative; background-color:#CCC; border:dashed #999"></div>
</td><td>
<input type="submit" value="搜索" size="10" />
</td>
</form>
</tr>
</table>
</center>
</body>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值