1.把autoComplete.php放入根目录,
在cp_mtag中查找
<div class="f_status s_clear">
<a href="javascript:;" onclick="window.scrollTo(0,0);" id="a_top" title="TOP">TOP</a>
</div>
2.把它下面的所有代码替换成这个:
3.后台更新缓存
4.这里查询的是所有tagname数据,可以根据需要添加fieldid判断。
5.演示见效果图,需要好看点,自行修改CSS。
<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.js //////////////////////////////////
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;
}
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;
}
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('您的浏览器不支持');
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
}
function getNodeName(xmldoc,duplicate){
var d;
var na=[];
d=(typeof duplicate=='undefined')?true:duplicate;
for (var i=0;i<xmldoc.childNodes.length;i++){
if (xmldoc.childNodes[i].hasChildNodes()){
na=na.concat(xmldoc.childNodes[i].tagName);
}
}
na=(d)?na:na.unique();
return na
}
</script>
<script type="text/javascript">
var isModify = false;
var thetimer = '';
var maxid = 1;
var xml_autoC = new autoComplete('mtag_{$fieldid}_name','autoComplete.php');
//选择
function selectField(id) {
for (i=0;i<$i;i++) {
$('d