php & ajax 小例子——仿百度搜索自动完成下拉框

最新推荐文章于 2021-03-22 19:57:13 发布

Z大钊

最新推荐文章于 2021-03-22 19:57:13 发布

阅读量1k

点赞数

分类专栏： php 文章标签： xml php ajax

本文链接：https://blog.csdn.net/baidu_28514449/article/details/49892777

版权

功能：1.输入字母，会通过ajax查询年后台信息，如果部分匹配了，就会以下拉框形式罗列。 2.点击下拉框选项，会选中该选项。 3.php解析xml文件有三个文件：autoGetCDInfo.html（前端页面）、getInfo.php（后端解析xml文件）、CDinfo.xml（CD信息xml文件）autoGetCDInfo.ht

摘要由CSDN通过智能技术生成

功能：1.输入字母，会通过ajax查询年后台信息，如果部分匹配了，就会以下拉框形式罗列。

2.点击下拉框选项，会选中该选项。

3.php解析xml文件

有4个文件：autoGetCDInfo.html（前端页面）、getInfo.php（后端解析xml文件）、CDinfo.xml（CD信息xml文件）

以及一个css文件。

autoGetCDInfo.html（前端页面）

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" Content="text/html;charset=utf-8">
 <link rel="stylesheet" href="getCDinfo.css" type="text/css"/>
 <title>查询CD专辑信息</title>
</head>
<body>
 <input type="text" id="input" οnkeyup="autoComplete(this.value)">
 <button type="submit" id="submit" value="查询">查询</button><br>
 <div id="showList">
 <!-- 下拉框 -->
 </div>
</body>
<script>
 var xmlHttp;
 function autoComplete(s){
  var str=s.trim();
 // if(str=="") return;
  xmlHttp=getXmlHttpObject();
  if(xmlHttp==null){
   alert("Broswer dose not support HTTP Request.");
  }
  var url="getInfo.php";
  url=url+"?q="+str;
  url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
 }
 function getXmlHttpObject(){
  var xmlHttp=null;
  try{
   xmlHttp= new XMLHttpRequest();
  }catch(e){
   try{
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }catch(e){

最低0.47元/天解锁文章

Z大钊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php & ajax 小例子——仿百度搜索自动完成下拉框

功能：1.输入字母，会通过ajax查询年后台信息，如果部分匹配了，就会以下拉框形式罗列。 2.点击下拉框选项，会选中该选项。 3.php解析xml文件有三个文件：autoGetCDInfo.html（前端页面）、getInfo.php（后端解析xml文件）、CDinfo.xml（CD信息xml文件）autoGetCDInfo.ht
复制链接

扫一扫