关闭

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

标签: xmlphpajax
241人阅读 评论(0) 收藏 举报
分类:

功能: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" onkeyup="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){
    xmlHttp=new ActiveXObject("Miscrosoft.XMLHTTP");
   }
  }
  return xmlHttp;
 }
 function stateChanged(){
  if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
   document.getElementById("showList").innerHTML=xmlHttp.responseText;
  }
 }
 function clickList(str){
  document.getElementById("input").value=str;
  document.getElementById("showList").innerHTML="";
 }
</script>
</html>

getInfo.php(后端解析xml文件)
<?php
 $str=$_GET["q"];
 if($str==""){
  echo "";
  return;
 }
 $docXml=new DOMDocument();
 $docXml->load("CDinfo.xml");
 $cd=$title="";
 $title=$docXml->getElementsByTagName("TITLE");
 $flag=0;
 $result="<dl>";
 foreach($title as $t){
  if($t->nodeType==1){
   $temp=$t->childNodes->item(0)->nodeValue;
   if(strncasecmp($str,$temp,strlen($str))==0){  //strncasecmp()对大小写不敏感
    $result=$result."<dt onclick=\"clickList(this.childNodes.item(0).nodeValue)\"> ".$temp."</dt>";
    $flag=1;
   }
  }
 }
 if($flag==0){
  $result="";
 }
 else{
  $result=$result."</dl>";
 }

 echo $result;
?>

CDinfo.xml(CD信息xml文件)
<!--  Edited by XMLSpy®  -->
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
</CATALOG>




中途遇到的一些问题:
1.xmlHttp.status始终为0,导致xmlHttp.responseText一直是空的.正常下,应为200
查了很久发现,其实是 xmlHttp.readyState==1这里弄错了,应该是 xmlHttp.readyState==4

function stateChanged(){
  if(xmlHttp.readyState==1 || xmlHttp.readyState=="complete"){
   document.getElementById("showList").innerHTML=xmlHttp.responseText;
  }
 }

2.在getInfo.php文件里,点击下拉框onclick="func(this.value)"获取到的值是空的,是undefined。
    问题出现在这句代码里:
$result=$result."<dt onclick=\"clickList(this.value)\"> ".$temp."</dt>";
    之前一直在下拉框<select> <option>使this.value,能获取到点击选中的选项的值,但是这回
我用的是<dl><dt>所以onclick(this.value)中的this.value不能获取到值。然后我就思考,this的最用是什么?
    学过类与对象知识,都知道,this的作用是获取当前对象实例。那么这里获取到的当前对象就是当前标签了。
如果是:<option onclick=“clickList(this.value)">那么this获取到的对象是option。然后我查了一下option
的属性,发现有value这个属性。
    这么说来,<dt onclick=“clickList(this.value)">获取到的值是undefined,说明了dt中没有value这个
属性。所以不能直接这么获取到dt中的值。只能另想办法。
    既然this是获取到当前标签对象,那么根据DOM树结构,那我是不是可以像DOM那样通过节点来获取到呢?
于是我这样改了代码,结果可以获取到值。
<dt onclick="clickList(this.childNodes.item(0).nodeValue)">
    这说明了在这里this获取到的是DOM中的节点对象。
    
    然后百度到了一篇很详细的文章http://www.cnblogs.com/uedt/articles/1748422.html。这文章对this作了十分详细
的分析。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10368次
    • 积分:270
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论