`
lt0604
  • 浏览: 16226 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

基于Proptotype的AutoComplete

阅读更多
在输入框内键入关键字,自动弹出相关搜索内容帮助,如baidu,google样的提示框
工具代码如下(重新排版,并加入注释):
var AutoComplete = Class.create({
    //ele:加入自动提示的输入框
    //func:创建提示框之前调用的函数,多为Ajax
    //options:选择项的颜色、父节点ID、选择某项后的回调函数,此参数可选
    initialize: function(ele,func,options){
        this.oInput = $(ele);
        this.getContent = func;
        this.oDiv = $(document.createElement('div'));
        this.visible = false;
        this.index = -1;
        this.count = 0;
        this.targetId = "";
        this.targetText = "";
        this.inputTextCount=0;
        this.oInputFocus = true;
        this.setDivStyle();
        this.options = this.setOptions(options);    
        this.appendDiv();
        Event.observe(this.oInput, 'blur', this.onBlur.bindAsEventListener(this));
        Event.observe(this.oInput, 'keydown', this.onKeyDown.bindAsEventListener(this));
        Event.observe(this.oInput, 'dblclick', this.onDblClick.bindAsEventListener(this));
        Event.observe(this.oInput, 'keyup', this.onKeyUp.bindAsEventListener(this));
    },
    //弹出层样式、属性
    setDivStyle:function(){
        var position = this.oInput.cumulativeOffset();
        this.oDiv.style.display = 'none';
        this.oDiv.style.position = 'absolute';
        this.oDiv.id = 'autoComplete';
        this.oDiv.style.width = this.oInput.getWidth() + "px";
        this.oDiv.style.left = position.left + "px";
        this.oDiv.style.top = position.top + this.oInput.getHeight() + "px";
        this.oDiv.style.border = "1px solid #cfcfcf";
        this.oDiv.style.zIndex = "100";
        this.oDiv.style.backgroundColor = "white";
    },
    //设置options参数
    setOptions:function(opt){
        var options = {
            hoverColor:'aqua',
            containerId:'',
            postAutoComplete:function(){}
        };
        Object.extend(options, opt || {});
        return options;
    },
    //每一项的样式、属性
    setItemStyle:function(ele, id, flag){
        ele.writeAttribute("dataid", id);
        ele.writeAttribute("dataflag", flag);
        ele.style.paddingLeft = "5px";
        ele.style.paddingRight = "5px";
        ele.style.paddingTop = "5px";
        ele.style.paddingBottom = "5px";
        ele.style.cursor = "default";
        ele.style.fontSize = "12px";
    },
    //将创建的提示DIV追加DOM中
    appendDiv:function(){
        if(this.options.containerId == '')
            document.body.appendChild(this.oDiv);
        else
            $(this.options.containerId).appendChild(this.oDiv);    
    },
    //
    finalize:function(){
        alert('not implement yet');
    },
    searchData:function(){
        this.clearItems();
        this.getContent(this.oInput.value);
    },
    show:function(){
        if(this.count > 0){
            Element.show(this.oDiv.id);
            this.visible = true;
        }
    },
    addItem:function(id, name, flag){
        var e = $(document.createElement('div'));
        this.setItemStyle(e, id, flag);
        this.addObserver(e);
        e.innerText = name;
        e.index = this.count;
        this.count = this.count + 1;
        this.oDiv.appendChild(e);
    },
    hide:function(){
        Element.hide(this.oDiv.id);
        this.clearItems();
        this.index = -1;
        this.visible = false;
        this.count = 0;
    },
    onBlur:function(){
        if(this.index == -1){
            this.hide();
        } else{
                
        }
    },
    onDblClick:function(){
        this.searchData();
    },
    onKeyDown:function(){
        if(this.visible){
            switch(event.keyCode){
                case Event.KEY_DOWN:
                    this.getNextItem();
                    Event.stop(event);
                    break;
                case Event.KEY_UP:
                    this.getPrevItem();
                    Event.stop(event);
                    break;
                case Event.KEY_RETURN:
                    this.selectItem();
                    Event.stop(event);
                    break;
            }
        }
    },
    onKeyUp:function(){
        if((event.keyCode >=65 && event.keyCode <= 90) ||
                (event.keyCode >=48 && event.keyCode <= 57) ||
                event.keyCode == 32){
            var _txt = this.oInput.value;
            this.inputTextCount = _txt.length;
            if(_txt.strip() != "" && this.inputTextCount > 0 && _txt != this.key) {
                this.key = this.oInput.value;
                this.searchData();
            }
        }
        if(!this.visible){
            if(event.keyCode == Event.KEY_DOWN && this.oInput.value != ''){
                this.searchData();
            }
        }
        if(event.keyCode == Event.KEY_BACKSPACE){
            if(this.oInput.value.blank()){
                this.hide();
                this.targetId = "";
            } else{
                var _txt = this.oInput.value;
	       this.inputTextCount = _txt.length;
	       if(_txt.strip() != "" && this.inputTextCount > 0 && _txt != this.key) {
	           this.key = this.oInput.value;
	           this.searchData();
	       }
            }
        }    
    },
    getNextItem:function(){
        var idx = (this.index == this.count - 1) ? (this.index = 0) : ++this.index;
        var ele = this.getCurrentItem(idx);
        this.render(ele);
    },
    getPrevItem:function(){
        var idx = (this.index == 0) ? (this.index = this.count - 1) : --this.index;
        var ele = this.getCurrentItem(idx);
        this.render(ele);
    },
    getCurrentItem:function(idx){
        var ele;
        $(this.oDiv.id).childElements().each(function(item){
            if(item.index == idx){
                ele = item;
                throw $break;
            }
        });
        return ele;
    },
    render:function(ele){
        $(this.oDiv.id).childElements().each(function(item){
            item.style.backgroundColor = 'white';
        });
        ele.style.backgroundColor = this.options.hoverColor;
        this.oInput.value = ele.innerText;
    },
    addObserver: function(element){
        Event.observe(element, "mouseover", this.onItemMouseOver.bindAsEventListener(this));
        Event.observe(element,"mouseout",this.onItemMouseOut.bindAsEventListener(this));
        Event.observe(element, "click", this.onItemClick.bindAsEventListener(this));
    },
    onItemMouseOver:function(){
        var ele = Event.findElement(event,'div');
        this.index = ele.index;
        $(this.oDiv.id).childElements().each(function(item){
            item.style.backgroundColor = 'white';
        });
        ele.style.backgroundColor = this.options.hoverColor;
        Event.stop(event);
    },
    onItemMouseOut:function(){
        var ele = Event.findElement(event,'div');
        this.index = -1;
        ele.style.backgroundColor = 'white';
        Event.stop(event);
    },
    onItemClick:function(){
        var ele = Event.findElement(event,'div');
        this.oInput.value = ele.innerText;
        this.targetflag = ele.readAttribute("dataflag");
        this.targetId = ele.readAttribute("dataid");
        this.targetName = ele.innerText;
        if(this.targetflag == "user") {
            chatUser(this.targetId, this.targetName);
        } else {
            chatGroup(this.targetId, this.targetName);
        }
        this.hide();
        this.options.postAutoComplete();
    },
    selectItem:function(){
        var ele;
        var children = $(this.oDiv.id).childElements();
        for(var i=0,len=children.length;i<len;++i){
            if(children[i].index == this.index){
                ele = children[i];
                break;
            }
        }
        if(!ele) return;
        this.oInput.value = ele.innerText;
        this.targetflag = ele.readAttribute("dataflag");
        this.targetId = ele.readAttribute("dataid");
        this.targetName = ele.innerText;
        if(this.targetflag == "user") {
            chatUser(this.targetId, this.targetName);
        } else {
            chatGroup(this.targetId, this.targetName);
        }
        this.hide();
        this.options.postAutoComplete();
    },
    clearItems:function(){
        while (this.oDiv.childNodes[0]){
            this.oDiv.removeChild(this.oDiv.childNodes[0]);  
        }
    },
    getId:function(){
        return this.oDiv.id;
    }
});


具体调用方法如下:
var complete = new AutoComplete("input_id",
function(val){
    new Ajax.Request(url, {method: 'post',parameters: {},
        onSuccess: function(rsp) {
            var jsonObj = rsp.responseText.evalJSON();
            for(var i=0,len=jsonObj.length;i<len;i++){
                //具体可以根据自己要求改写此方法
                complete.addItem(参数);
            }
            complete.show();
        },
        onFailure: function(){}
    });
});
0
1
分享到:
评论

相关推荐

    基于jQuery Autocomplete plugin 下开发的拼音下拉列表插件(2)

    在本主题中,我们将深入探讨基于jQuery的Autocomplete插件,并着重关注如何开发一个用于拼音输入的下拉列表插件。这个插件是为了解决中文输入时的搜索效率问题,通过提供拼音提示来帮助用户更快地找到所需内容。...

    基于autocomplete的@联系人效果

    "基于autocomplete的@联系人效果"是这个话题的核心,它模仿了微博中@联系人时出现的智能推荐功能。这种功能允许用户在输入时快速找到并选择目标联系人,而无需手动输入完整的名字。 在实现这个功能时,通常会使用...

    基于jquery.autocomplete的分页实现

    在本文中,我们将深入探讨如何实现基于jQuery UI插件`jquery.autocomplete`的分页功能。这个主题主要针对Web开发人员,尤其是那些使用JavaScript库jQuery和.NET框架进行前端与后端交互的开发者。我们将讨论如何在...

    一个基于jQuery的autocomplete(gb2312、utf-8)

    《基于jQuery的Autocomplete插件实现与应用》 在Web开发中,为了提高用户体验,我们经常需要使用到自动完成(Autocomplete)功能。这通常在用户输入时提供预测建议,帮助用户快速找到所需内容。本篇文章将深入探讨...

    基于redis的自动补全autocomplete-redis.zip

    autocomplete-redis 是基于redis的自动补全,他会自动索引你要自动补全的句子,然后根据你的输入返回包含这个输入的句子。这儿有一个完整的演示实例: http://ohbooklist.com/redis/ ,我们索引了3.7万本书的名字。 ...

    jquery autocomplete下载.rar

    jQuery Autocomplete 是基于 jQuery 库的一个扩展,它允许开发者创建动态的、实时的搜索建议。用户在输入框中输入字符时,插件会根据预设的数据源提供匹配的建议列表。这种功能在各种需要用户输入搜索关键词或者...

    Autocomplete

    Autocomplete

    jquery.autocomplete.js使用示例,可直接运行

    这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取数据并在用户输入时动态显示匹配的建议选项。 ### 1. 基本原理 jQuery Autocomplete.js 的工作原理是监听用户在输入框中的键盘事件,如keyup。当用户...

    layui自动填充插件autocomplete.rar

    在layui中,"autocomplete"是一款自动填充插件,常用于输入框,提供智能提示功能,提高用户输入效率。这款插件适用于各种需要自动补全场景,如搜索框、表单填写等。 在layui的autocomplete插件中,主要涉及以下知识...

    BootStrap-autocomplete模糊匹配,自动填充

    Bootstrap Autocomplete是一款基于Bootstrap框架的插件,专为提高用户输入体验而设计。它提供了模糊匹配功能,使得用户在输入时能够快速找到并选择预先设定的值列表中的选项,极大地提升了交互性和效率。这个插件...

    jquery autocomplete

    **jQuery Autocomplete 知识详解** jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全的功能,极大地提升了用户在网站上的交互体验。这个插件源自于 jQuery UI 库,但也可以单独使用。...

    jquery的autocomplete(自动补全)插件

    这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了jQuery。在本案例中,提供了`jquery-ui.js`文件,该文件不仅包含了jQuery UI的核心功能,还内置了`jquery.js`,这确保了对jQuery Autocomplete的支持。 ...

    autocomplete-demo.zip

    jQuery库提供了一个强大的插件——jQuery UI Autocomplete,本文将详细讲解其原理、使用方法以及一个基于2017年版本的`jquery.autocomplete.js`的实际示例。 首先,jQuery Autocomplete是jQuery UI库的一部分,它...

    jquery autocomplete实现框输入提示

    **jQuery Autocomplete 实现输入框智能提示** jQuery Autocomplete 是一个强大的组件,广泛应用于网页上的输入框,可以为用户提供实时的搜索建议或自动补全功能。这个组件通过与后端服务器进行异步通信(通常使用 ...

    仿百度、Google搜索效果 AutoComplete

    实现这种功能的关键技术之一是JavaScript库,这里提到的文件`jquery-autocomplete`可能就是一个基于jQuery的AutoComplete插件。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画设计和Ajax交互...

    jquery-autocomplete

    `jQuery-autocomplete` 是一个基于 jQuery 的开源插件,用于实现自动补全功能。这个插件使得在网页表单输入框中快速、高效地提供下拉建议变得简单易行,提高了用户界面的交互性和用户体验。它广泛应用于搜索引擎、...

    jquery-ui-autocomplete

    jQuery UI Autocomplete 是一个强大的前端组件,它基于 jQuery 库,用于实现自动补全功能。这个组件允许用户在输入框中键入文字时,系统会根据预设的数据源实时显示匹配的建议列表,极大地提高了用户体验,尤其在...

    vant的field组件(autocomplete)

    在Vant的组件体系中,`Field`组件主要用于表单输入,而`Autocomplete`则是用于实现自动完成功能的组件。在本案例中,我们将探讨如何将`Field`组件与自动完成功能相结合。 1. **Vant Field组件** Vant的`Field`组件...

    jquery.autocomplete.js资源压缩包下载

    《jQuery Autocomplete 智能联想框JS实现详解》 在网页开发中,为了提高用户体验,经常需要使用到一种功能——智能联想框。这个功能可以让用户在输入框中输入文字时,自动显示与输入内容相关的建议,就像百度搜索...

    jquery autocomplete js 文件

    这个插件基于 jQuery 库,使得在网页中实现类似百度搜索框那样的动态下拉建议变得简单易行。在本篇文章中,我们将深入探讨如何使用和配置 jQuery Autocomplete 插件,以及其背后的核心概念。 ### 1. jQuery ...

Global site tag (gtag.js) - Google Analytics