MooTools 1.3的搜索提示功能

Demo地址： http://studio.80y.cn/resources/Demo/UI.Search.htm

/// <reference path="mootools.js" />
/// <reference path="MooStudio.js" />
/*

Author : S.P    开源社区: studio.80y.cn     交流QQ群:1809084   转载请保留此段信息

在TextBox上输入关键词，下面出现相关的搜索信息。 需要和服务器交互处理
使用： var search = new UI.Search(el[options]);   
参数:
   1. el - (mixed) textbox元素的id或引用
   2. options - (object)
      参见如下选项:
        ● url - (string) 数据搜索的远程接口
        ● key - (string 默认值:"Key") 提交搜索关键词所使用的字段名 
        ● data - (object) 搜索时附带提交的信息
        ● count - (int 默认值:10) 返回的搜索结果数量
        ● method - (string 默认值:"post") 提交数据的动作post / get
        ● click : ( function (item,el,obj)) 点击搜索结果所触发的事件，默认是把搜索结果的text复制给TextBox。 item:远程返回的JSON对象 el: TextBox对象 obj:搜索出来的结果呈现对象
        ● show : (function (item)) 给出搜索结果的显示内容。 默认为显示item的Name属性。 item:远程返回的JSON对象
        ● size : (object) 搜索结果框的大小设置
            ● width : (int|string) 搜索结果框的宽度。默认为等于TextBox的宽度。 可输入"auto" 表示自适应内容的宽度。 输入数字表示固定宽度。 
*/

if (!window["UI"]) window["UI"] = new Object();

(function (ns) {
    
    ns.Search = new Class({
        stop : function(){ this.data.stop = true; } ,
        start : function(){ this.data.stop = false; } ,
        Implements: [Events, Options],
        // 缓存的数据
        data : { 
            selecedtIndex : -1,   // 当前选中的项目
            request : null,    // 搜索的httprequest对象
            result : [],       // 搜索结果
            key : "",      // 上次搜索的关键词
            stop : false    // 标记搜索功能是否开启
        } ,
        options: {
            url : null,   // 搜索接口地址
            key : "Key",    // 搜索提交的字段名
            postKey : function(key){ return key; }, // 在客户端处理Key的方法
            data : {},  // 搜索时提交的固定值
            count : 10, // 返回的搜索结果数量。 为0表示不限制
            method : "post",    // 搜索的提交方式 get or post
            click : function(item,el,obj){  el.set("value",obj.get("text"));   }, // 点击搜索结果触发的事件 
            show : function(item){ return item.Name != undefined ? item.Name : "" } ,   // 显示搜索结果的内容
            size : {
                width : null   // 搜索结果框的宽度。 为null则宽度和输入框一致,可输入数值或者auto
            } ,
            count : 10
        },
        initialize: function (el,options) {
            $import("UI.Search.css",false);
            var t = this;
            t.setOptions(options);
            t.element =  $(el);
            // 搜索结果容器
            t.handler = new Element("div" ,{
                "class" : "UI-search" ,
                "html" : "<div class=\"UI-search-title\"></div><div class=\"UI-search-result\"></div>"
                });
            t.element.addEvents({
                "keyup" : t.onKeyUp.bind(t),
                "keydown" : t.onKeyDown.bind(t),
                "focus" : t.onFocus.bind(t) ,
                "blur" : t.onBlur.bind(t)
                });
        } ,
        // el 被触发
        onKeyUp : function(e){  
            var t = this;
            var key =  t.element.get("value");
            if (key == t.data.key || key == "") return;       // 如果没有改变则返回
            t.handler.setStyle("visibility" , t.data.stop ? "hidden" : "visible");
            if(t.data.stop) return;
            if(t.data.request != null) t.data.request.cancel();
            t.data.key = key;
            t.options.data.count = t.options.count;
            var title = t.handler.getElement(".UI-search-title");
            var result = t.handler.getElement(".UI-search-result");
            title.set("html","<div class=\"loading\">正在搜索..</div>");
            title.setStyle("display","block");
            result.set("html","");
            t.data.request = new Request({
                url : t.options.url ,
                method : t.options.method,
                data : Object.merge(t.options.data, JSON.decode("{" + t.options.key + ":\"" + t.options.postKey(key) + "\"}")) ,
                onSuccess : function(response){
                    var list = t.data.result = JSON.decode(response);
                    if(t.options.count)
                        title.set("html","<div class=\"result\">找到与<span class=\"key\">" + t.options.postKey(key) +"</span>有关的结果<span class=\"count\">" + list.length + "</span>条</div>");
                    else
                        title.set("html","");
                    if(list.length > 0)
                        title.setStyle("display","none");
                    list.each(function(item,index){
                        new Element("div",{
                            "html" : t.options.show.apply(t,[item]),
                            "class" : "UI-search-item",
                            "events" : {
                                "mouseover" : function(e){ var selected = t.handler.getElement("div[class$=on]"); if(selected!=null) selected.fireEvent("mouseout");  this.addClass("on");  t.data.selecedtIndex = index; } ,
                                "mouseout" : function(e){ this.removeClass("on"); },
                                "mousedown" : function(e){ t.options.click.apply(t,[item,t.element,this]); t.data.key = t.element.get("value"); }
                            }
                        }).inject(result);
                    });
                } 

            }).send();
        } ,
        onKeyDown : function(e){
            var t = this;
            if(t.data.result.length == 0){ t.data.selecedtIndex = -1; return; }
             var selected  = null;
            if(["up","down","enter"].contains(e.key)) selected = t.handler.getElement("div[class$=on]");
            switch(e.key){
                case "up":
                case "down":
                    if(selected != null) selected.fireEvent("mouseout");
                    var step = e.key == "up" ? -1 : 1;                    
                    t.data.selecedtIndex += step;
                    if(t.data.selecedtIndex > t.data.result.length - 1) t.data.selecedtIndex = 0;
                    if(t.data.selecedtIndex < 0) t.data.selecedtIndex = t.data.result.length - 1;
                    selected = t.handler.getElements(".UI-search-item")[t.data.selecedtIndex];
                    selected.fireEvent("mouseover");
                break;
                case "enter":
                    if(selected != null) selected.fireEvent("mousedown");
                    t.element.blur();
                break;
                default:
                    t.data.selecedtIndex = -1;
                break;
            }
        } ,
        onFocus : function(e){
            var t = this;
            var key = t.element.get("value");
            t.handler.inject($(document.body));
            t.handler.setStyles({
                "top" : t.element.getSize().y + t.element.getTop() ,
                "left" : t.element.getLeft() ,
                "width" : t.options.size.width == null ? t.element.getSize().x : t.options.size.width ,
                "visibility" : "hidden"
            });
            if(key != ""){
                t.element.fireEvent("keyup");
            }
        } ,
        onBlur : function(e){
            var t = this;
            (function(){ t.handler.dispose(); }).delay(100);
        }
    });    
    
})(UI);