<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta name="keywords" content="AJAX Asynchronous JavaScript + XML Asynchronous Javascript And XML DOM Document Object Mode CSS CSS2 CSS3" />
<meta name="description" content="AJAX Asynchronous JavaScript + XML Asynchronous Javascript And XML DOM Document Object Mode CSS CSS2 CSS3" />
<meta name="Author" content="Audi" />
<meta name="Author" content="http://audi.tw" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>AJAX </title>
<style rel="stylesheet" type="text/css">
._sgClass{background:white;}
.td_over{background-color:#3366cc;}
.td_out{background-color:white;}
</style>
<script type="text/javascript" >
autoComplete=function(fID){//create autocomplete object
this.id=document.getElementById(fID);
if (!this.id) return false;
this.div ='_sg';
this.className ='_sgClass';
this.suggest ='_qg';
this.marginTop =12;
this.marginLeft =12;
this.divWidth ='372px';
this.selectHeight =6;
this.xmlHttp =this.createXHR();
var pointer = this;
this.id.onkeyup = function(e){ return pointer.onKeyUp(e); }
}
autoComplete.prototype.onKeyUp=function(e){
var key = (window.event) ? window.event.keyCode : e.which;
switch(key){
case 13: //return
break;
case 8: //backspace
break;
case 9: //tab
break; //do nothing
case 27: //esc
this.id.value='';
break;
case 38: //up
this.moveSelectionUp();
break;
case 40: //down
this.moveSelectionDown();
break;
default:
this.getRequest();
}
}
autoComplete.prototype.moveSelectionUp=function() {//key up
var index = document.getElementById(this.suggest);
if (index.selectedIndex > 0){
index.selectedIndex --;
this.id.value =index.options[index.selectedIndex].value;
}
else if(index.selectedIndex == 0){
index.selectedIndex = -1;
this.id.value = value_1;//走到最顶端将值赋给输入的值
this.id.focus();//输入框得到焦点
}else if(index.selectedIndex == -1){
index.selectedIndex = index.options.length-1;
}
}
autoComplete.prototype.moveSelectionDown=function() {//key down
var index = document.getElementById(this.suggest);
if (index.selectedIndex < index.options.length-1){
index.selectedIndex ++;
this.id.value =index.options[index.selectedIndex].value;
}
else {
index.selectedIndex = -1;
this.id.value = value_1;//走到最底端将值赋给输入的值
this.id.focus();//输入框得到焦点
}
}
autoComplete.prototype.getRequest=function(){
var url='autoComplete.php?s='+this.id.value+'&ts='+new Date().getTime();
this.sendRequest(url);
value_1 = this.id.value;//get the value
}
autoComplete.prototype.createLayer=function(){
var divName=this.div;
var sName=this.suggest;
var obj=this.id;
var body=document.getElementsByTagName("body")[0];
//create layer
if (document.getElementById(divName)==null){
var div=document.createElement('div');
div.setAttribute('id',divName);
div.style.position='absolute';
div.style.width=obj.offsetWidth+'px';
var pos=this.getPos(this.id);
div.style.left=pos.x+'px';
div.style.top=(pos.y+obj.offsetHeight)+'px';
body.appendChild(div);
}
}
autoComplete.prototype.getPos=function(d){
var cx=0,cy=0,obj;
obj=d;
if (obj.offsetParent){
while (obj.offsetParent){
cx += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if(obj.x){
cx+=obj.x;
}
obj=d;
if (obj.offsetParent){
while (obj.offsetParent){
cy += obj.offsetTop;
obj = obj.offsetParent;
}
}else if(obj.y){
cy+=obj.y;
}
//IE 干 body margin
var b=navigator.userAgent;
var ie=(b.indexOf('MSIE')!=-1);
var opera=(b.indexOf('Opera')!=-1);
var mozilla=(b.indexOf('Mozilla')!=-1);
if (ie){
return {x:cx+this.marginLeft, y:cy+this.marginTop}
}else{
return {x:cx, y:cy}
}
}
autoComplete.prototype.showSuggest=function(va){
var obj=document.getElementById(this.div);
var selectobj=document.createElement("select");
for (var i=0;i<va.length;i++){
var op=document.createElement("option");
var sText=document.createTextNode(va[i][1])
op.appendChild(sText);
op.setAttribute('value',va[i][1]);
selectobj.appendChild(op);
}
selectobj.setAttribute('id',this.suggest);
selectobj.setAttribute('name',this.suggest);
selectobj.setAttribute('size',this.selectHeight);
selectobj.style.width=this.divWidth;
// 耞琌 竒Τ 某 虫
if (document.getElementById(this.suggest)){
obj.replaceChild(selectobj,document.getElementById(this.suggest));
}else{
obj.appendChild(selectobj);
}
var pointer=this;
selectobj.onchange=function(){
pointer.submits();
}
selectobj.ondblclick=function(){
pointer.submits();
}
}
autoComplete.prototype.submits=function(){
var v=document.getElementById(this.suggest).value;
this.id.value=v;
var body=document.getElementsByTagName("body")[0];
body.removeChild(document.getElementById(this.div));
}
autoComplete.prototype.createXHR=function(){
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!xmlHttp) {
alert('www.eiok.net提醒您！');
return false;
}else{
return xmlHttp;
}
}
autoComplete.prototype.sendRequest=function(url){
var pointer=this;
this.xmlHttp.open('GET',url,true);
this.xmlHttp.onreadystatechange=function(){pointer.catchXML()};
this.xmlHttp.send(null);
}
autoComplete.prototype.catchXML=function(){
if (this.xmlHttp.readyState==4){
xml=this.xmlHttp.responseXML;
if (this.xmlHttp.status == 200) {
this.createLayer();
this.showSuggest(getNodeContent(xml));
}else{
alert(this.xmlHttp.status);
}
}
}
/////////////////////// xml.js /////////////////////////////////////////////
// Array.indexOf( value, begin, strict ) - Return index of the first element that matches value
Array.prototype.indexOf = function( v, b, s ) {
for( var i = +b || 0, l = this.length; i < l; i++ ) {
if( this[i]===v || s && this[i]==v ){
return i;
}
}
return -1;
};
// Array.push() - Add an element to the end of an array, return the new length
if( typeof Array.prototype.push==='undefined' ) {
Array.prototype.push = function() {
for( var i = 0, b = this.length, a = arguments, l = a.length; i<l; i++ ) {
this[b+i] = a[i];
}
return this.length;
};
}
// Array.unique( strict ) - Remove duplicate values
Array.prototype.unique = function( b ) {
var a = [], i, l = this.length;
for( i=0; i<l; i++ ) {
if( a.indexOf( this[i], 0, b ) < 0 ) { a.push( this[i] ); }
}
return a;
};
function getNodeContent(xmldoc,key,label) {
var na=[],va=[],l;
var outstr='';
key=(typeof key=='undefined')?getNodeName(xmldoc,false):key;
for (var i=0;i<xmldoc.getElementsByTagName(key).length;i++){
var xml=xmldoc.getElementsByTagName(key)[i];
na=getNodeName(xml,false); //ゲ惠琌斑 , 钡 ㄓ 笆 ,穦ㄌ 弄
for (var j=0;j<na.length;j++){
var xmlk=xml.getElementsByTagName(na[j]);
for (var k=0;k<xmlk.length;k++){
l=Math.max(va.length,va.length-1);
if(typeof label!='undefined'){
if(typeof xmlk[k].getAttribute(label)!=null && typeof xmlk[k].getAttribute(label)!=''){
va[l]=[xmlk[k].getAttribute(label),xmlk[k].childNodes[0].nodeValue];
}else{
va[l]=[na[j],xmlk[k].childNodes[0].nodeValue];
}
}else{
va[l]=[na[j],xmlk[k].childNodes[0].nodeValue];
}
outstr+=va[l]+'\n';
}
}
}
return va
}
f
Axax+php+mysql搜索框自动显示数据
3星 · 超过75%的资源 需积分: 41 62 浏览量
2008-09-25
22:17:24
上传
评论
收藏 4KB RAR 举报 
ajax_like.rar （2个子文件） 
ajax 
ajax.php 9KB autoComplete.php 877B资源评论
kclaca2013-05-23无法使用啊，可能源码有问题。
gtczj2019-04-30代码太旧了
winlive
- 粉丝: 5
- 资源: 20
