MooTools 1.3的搜索提示功能

引用：http://www.cnblogs.com/sp-studio/archive/2011/04/13/2015087.html

使用： 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);