MooTools 1.3的搜索提示功能
来源:互联网 发布:林珊珊淘宝店铺33标志 编辑:程序博客网 时间:2024/06/04 23:45
引用: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);
- MooTools 1.3的搜索提示功能
- mootools实现搜索提示文本框 (仿GOOGLE)
- Ajax搜索框的自动提示功能
- 关于搜索提示功能的实现
- 搜索自动提示功能的实现
- 实现搜索框提示功能的方法
- 類似 搜索提示功能
- MooTools下的返回顶部功能的实现实例页面
- Android搜索自动提示功能
- 百度搜索框提示功能
- php实现搜索提示功能
- 实现搜索框输入时 提示相近词的功能
- 模仿百度搜索的自动提示功能 高大上
- 做ajax搜索框自动提示功能的体会
- selenium(webdriver)--操作搜索功能的自动提示下拉列表
- jQuery Ajax实现简单的搜索框提示功能
- 利用easyUI的combobox打造自动搜索提示功能
- 实现类似于google,baidu的搜索提示功能,带有上下键选择功能
- memcache java客户端优化历程
- android从网络中获得一张图片,并显示在屏幕上
- Oracle数据导入导出imp/exp-备份恢复
- 未来电子商务十大发展趋势--引用51aspx 阿里巴巴空间
- Android捕获未知异常,防止弹出意外终止对话框
- MooTools 1.3的搜索提示功能
- wmsys.wm_concat的几个用法(附加功能)
- VS2003监视窗口(watch)的使用
- freeswitch移植到arm--交叉编译
- oracle 权限与角色
- 修改安装版Tomcat6.x运行时JVM编码(Encoding)
- 2010.7——2011.7年度总结
- (2011.07.20) 双链表.cpp -- 最基本的C++双链表
- shell脚本读取ini配置文件的值