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