AJAX AutoComplete简单的小例子

原创 2007年09月25日 10:51:00
因为项目需要,写了一个简单的AJAX自动完成的小例子,这里给出代码。
代码没有优化,优化方向是:1.进一步解耦  2.增加本地数据缓存的筛选,减少交互次数  3.优化筛选算法
有兴趣的朋友可以去尝试一下。
/*
 *    AutoComplete Class
 *  Author: Robin Chen(robchen@126.com)
*/


//AutoComplete Class
var AutoComplete = function(dom,options){
    
this.dom = dom;
    
this.startPoint = options.startPoint || 3;
    
this.JSONService = options.JSONService;
    
this.selector = new AutoCompleteSelector(this);
    
var __this = this;
    
this.selectMode = true;
    
this.dom.onfocus = this.dom.onchange = this.dom.onkeyup = function(){
        setTimeout(
function(){
            
if(__this.dom.cacheValue != __this.dom.value){
                __this.dom.cacheValue 
= __this.dom.value;
                __this.search();
            }
else{
                
if(__this.dom.value.length >= __this.startPoint)__this.selector.show();    
            }

        }
,10);
    }

    
var onMouseClick = function(evt){
        
var evt = evt || event;
        
var target = evt.target || evt.srcElement;
        
if(target != __this.dom && target != __this.selector.dom){
            __this.selector.hide();
        }

    }

    
try{
        document.body.attachEvent(
'onclick',onMouseClick);
    }
catch(e){
        document.body.addEventListener(
'click',onMouseClick,false);    
    }

}


AutoComplete.prototype 
= {
    request:
null,
    dataCache:
null,
    createXMLHttpRequest:
function(){
        
try{
            
return new XMLHttpRequest();    
        }
catch(e){
            
return new ActiveXObject('Microsoft.XMLHTTP');    
        }

    }
,
    search:
function(){
        
var keyword = this.dom.value;
        
if(keyword.length < this.startPoint)return;
        
if(this.request)this.request.abort();
        
var request = this.request = this.createXMLHttpRequest();
        request.open(
'GET',this.JSONService + '?keyword=' + escape(keyword),true);
        
var __this = this;
        request.onreadystatechange 
= function(){
            
if(request.readyState == 4 && request.status == 200){
                
var data = eval('(' + request.responseText + ')');
                __this.parseData.call(__this,data);
            }

        }

        request.send();
    }
,
    parseData:
function(data){
        
this.dataCache = data;
        
this.selector.load(data);
        
if(this.selector.dom.getElementsByTagName('div').length > 0){
            
this.selector.show();
        }
else{
            
this.selector.hide();    
        }

    }

}


//AutoCompleteSelector Class
var AutoCompleteSelector = function(autoCompleteObject){
    
this.autoCompleteObject = autoCompleteObject;
    
if(arguments[1]){
        
this.dom = arguments[1];
    }
else{
        
this.dom = this.createDefaultSelectorElement();    
    }

}


AutoCompleteSelector.prototype 
= {
    createDefaultSelectorElement:
function(){
        
var target = this.autoCompleteObject.dom;
        
var obj = target;
        
var width = target.offsetWidth;
        
var left = target.offsetLeft;
        
var top = target.offsetHeight + target.offsetTop;
        
if(window.ActiveXObject){
            
try{
                obj 
= obj.parentNode;
                
while(obj && obj.style){
                    obj 
= obj.parentNode;
                    left 
+= parseInt(obj.offsetLeft) || 0;
                    top 
+= parseInt(obj.offsetTop) || 0;
                }

            }
catch(e){}
        }

        
var div = document.createElement('div');
        div.className 
= 'autoCompleteSelector';
        div.style.position 
= 'absolute';
        div.style.left 
= left - 1 + 'px';
        div.style.top 
= top + 'px';
        div.style.width 
= width  + 'px';
        div.style.height 
= '200px';
        div.style.overflow 
= 'auto';
        div.style.display 
= 'none';
        div.style.zIndex 
= '1000';
        div.style.border 
= '1px solid #000';
        div.style.backgroundColor 
= '#fff';
        document.body.appendChild(div);
        div.autoCompleteSelectorObject 
= this;
        
return div;
    }
,
    dataCache:[],
    show:
function(){
        
this.dom.style.display = 'block';
    }
,
    hide:
function(){
        
this.dom.style.display = 'none';
    }
,
    load:
function(data){
        
this.clear();
        
for(var i = 0; i < data.length; i ++){
            
this.add(new AutoCompleteSelectItem(data[i],this));
        }

    }
,
    clear:
function(){
        
this.dom.innerHTML = '';
    }
,
    add:
function(item){
        
this.dom.appendChild(item.dom);    
    }
,
    remove:
function(item){
        
this.dom.removeChild(item.dom);    
    }

}


//AutoCompleteSelectItem Class
var AutoCompleteSelectItem = function(data,autoCompleteSelectorObject){
    
this.name = data.name;
    
this.value = data.value;
    
this.dataCache = data;
    
this.autoCompleteSelectorObject = autoCompleteSelectorObject;
    
this.dom = this.create();
    
var __this = this;
    
this.dom.onclick = function(){
        __this.autoCompleteSelectorObject.autoCompleteObject.dom.cacheValue 
= __this.name;
        __this.autoCompleteSelectorObject.autoCompleteObject.dom.value 
= __this.name;
        __this.autoCompleteSelectorObject.hide();
    }

}

AutoCompleteSelectItem.prototype 
= {
    create:
function(){    
        
var div = document.createElement('div');
        div.className 
= 'autoCompleteSelectItem';
        div.style.width 
= 'auto';
        div.style.height 
= '14px';
        div.style.fontSize 
= '11px';
        div.style.lineHeight 
= '14px';
        div.style.textAlign 
= 'left';
        div.style.padding 
= '2px';
        div.style.borderBottom 
= '1px solid #ccc';
        div.style.color 
= '#000';
        div.style.backgroundColor 
= '#fff';
        div.style.overflow 
= 'hidden';
        div.onmouseover 
= function(){
            
this.style.backgroundColor = '#999';
            
this.style.color = '#fff';
            
this.style.cursor = 'pointer';
        }

        div.onmouseout 
= function(){
            
this.style.backgroundColor = '#fff';
            
this.style.color = '#000';
        }

        div.innerHTML 
= this.name;
        div.autoCompleteSelectItem 
= this;
        
return div;
    }

}


使用方法是:
var autoCompleteController = new AutoComplete(document.getElementById('keyword'),{
            startPoint:3,
            JSONService:'autocomplete.php'
        });

后台页面(比如:autocomplete.php)接受一个GET方式提交的keyword参数,返回类似
[{"name":"Test1","value":"1"},{"name":"Test2","value":"2"}]
的JSON字符串即可
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JQuery Autocomplete使用Ajax例子

html: AuCom.html --> js: $(document).ready(funct...

简单的ajax例子

简单例子教你理解AJAX执行步骤

本文通过一个简单的例子来说明如何在IE6中使用AJAX技术。在这例子中,客户端每隔十秒,从服务器端取回一个随机的字符串,在不重新刷新页情况下,自动更新部分页面内容。例子仅用到了两个jsp文件,clie...

ajax最简单例子二

  • 2013-05-02 12:21
  • 15KB
  • 下载

DWR 实现Ajax的简单例子

1、将dwr.jar包放在web-info/lib目录下 2、编辑web.xml文件,添加servlet Java代码       dwr-invoker     D...

ajax最简单例子

  • 2008-08-21 12:55
  • 855B
  • 下载

一个简单的SqlServerCe + Entity Framework 5 Code First + MVC4 + Ajax例子(上)

我用的是Microsoft Visual Studio Express 2012 for Web,免费么。 新建一个MVC4项目 确定 默认选项,确定 在Models目录中...
  • Mackz
  • Mackz
  • 2013-02-23 14:47
  • 7388
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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