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

原创 2015年11月17日 20:34:04

功能: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作了十分详细
的分析。
版权声明:本文为博主原创文章,未经博主允许不得转载。

AJAX小案例:动态搜索提示(仿百度)

这几天学习了一些AJAX的知识,完成了一个仿照百度的搜索提示框 先上效果图:...
  • lq_lq314
  • lq_lq314
  • 2017年06月14日 14:44
  • 315

Jquery 仿百度搜索引擎自动完成功能

源代码如下所示: 自动完成例子   #search label {    display: block;   }   #search-text {    width: 150px;   } ...
  • javaquentin
  • javaquentin
  • 2014年12月22日 15:43
  • 2305

jquery+jsp+ajax实现类似的百度搜索下拉框

搜索词自动完成 $(function(){ //取得d
  • wohuozheng
  • wohuozheng
  • 2017年02月28日 15:02
  • 308

C#(asp.net)仿baidu或google智能匹配搜索下拉框

页面文件代码: //文本输入框 //选择后的数字值 //下拉框的点击  
  • zlggyn
  • zlggyn
  • 2014年07月28日 08:29
  • 873

JQuery+ajax实现类似百度搜索自动匹配功能

前台代码 公司名称: ...
  • zh134838
  • zh134838
  • 2015年10月23日 18:50
  • 586

仿百度下拉提示框代码

输入框下拉提示 数据库中以like方式查询数据库 1.下拉框样式,可根据需要进行相应的修改 style type="text/css">        .message_hover{   ...
  • yefanghua
  • yefanghua
  • 2014年04月18日 10:22
  • 2501

js及ajax实现搜索下拉自动提示

js代码 function test(keyword,event){ //定义全局变量 var keyword = $("#keyword").val(); var sel = docum...
  • sinat_38314794
  • sinat_38314794
  • 2017年06月12日 20:27
  • 1364

JQuery+ajax实现类似百度搜索自动匹配功能

引言    我们接触最多的、用的最多的搜索引擎就是百度了,可以说现在我们的生活如果离开像百度、谷歌这样的搜索引擎还是我们的生活没有了方向,我们在使用的时候都有一个体验就是我我们在输入关键紫的时候,他会...
  • u013045437
  • u013045437
  • 2015年10月23日 18:39
  • 7645

Android 仿百度谷歌搜索自动提示框,将搜索记录保存数据库

仿Google百度搜索输入关键字有下单列表选择
  • u014051380
  • u014051380
  • 2014年04月08日 11:41
  • 1487

一步一步教你实现仿百度搜索框下拉效果(上)

一步一步教你实现仿百度搜索框下拉效果(上) 最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果。 1、html 以及 css ...
  • zdy0_2004
  • zdy0_2004
  • 2015年10月11日 21:42
  • 2486
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:php & ajax 小例子——仿百度搜索自动完成下拉框
举报原因:
原因补充:

(最多只允许输入30个字)