由淘宝团队开发出来的Kissy Suggest 自动提示组件是什么好用的，下面就结合Kissy Suggest的使用（上一篇里有介绍）写一个简单的例子：
1 展示页面index.html：
?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB18030" />
<title>Suggest Examples</title>
<link rel="stylesheet" href="reset-grids-min.css" type="text/css" />
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="suggest.js"></script>
<style type="text/css">
#page { padding: 50px 50px 300px; width: 750px; margin: 0 auto; }
h1, h2, h3 { margin: 1em 0 0.3em; }
.section { margin-bottom: 50px; }
.section ol { margin: 5px 20px; }
.section ol li { list-style: decimal inside; margin: 5px 0; }
.search-input { width: 300px; height: 20px; padding: 5px 2px 0 4px; }
.search-submit { padding: 4px 10px; margin-left: 5px; }
input.g-submit { padding: 2px 8px; margin-left: 5px; }
html { overflow-y: scroll; }
</style>
</head>
<body>
<div id="page">
<div class="section">
<!--
获取淘宝商品信息接口(以查询"a"为例子)：
http://suggest.taobao.com/sug?code=utf-8&callback=?&q=a
-->
<h2>1. 淘宝首页的搜索提示：</h2>
<form name="search" method="get" action="http://search1.taobao.com/browse/search_auction.htm">
<input type="hidden" value="" name="sort"/>
<input type="hidden" value="D9_5_1" name="f"/>
<input type="hidden" value="" name="promote"/>
<input type="hidden" value="2" name="isnew"/>
<input type="hidden" value="b" name="atype"/>
<input type="hidden" value="all" name="commend"/>
<input type="hidden" value="auction" name="search_type"/>
<input type="hidden" value="initiative" name="user_action"/>
<input type="hidden" value="s1-e" name="ssid"/>
<input name="q" id="q" class="search-input"/>
<button type="submit" class="search-submit">淘我喜欢</button>
</form>
<script type="text/javascript">
(function() {
// 淘宝
var dataUrl = 'http://suggest.taobao.com/sug';
new KISSY.Suggest('q', dataUrl,
{ autoFocus: true,
resultFormat: '约%result%个宝贝'
});
})();
</script>
</div>
<div class="section">
<h2>1.1. 自动作测试用的搜索提示：</h2>
<form name="search" method="get" action="http://search1.taobao.com/browse/search_auction.htm">
<input name="myq" id="myq" class="search-input"/>
<button type="submit" class="search-submit">搜我喜欢</button>
</form>
<script type="text/javascript">
(function() {
// 测试
var dataUrl = 'AutoComplete';//http://localhost:8080/wwww/data.jsp
new KISSY.Suggest('myq', dataUrl,
{ autoFocus: true,
resultFormat: '约%result%个测试数据合适'
});
})();
</script>
</div>
<div class="section">
<h2>2. 有啊首页的搜索提示：</h2>
<form name="search2" method="get" action="http://youa.baidu.com/search/s" target="_blank">
<input class="search-input" name="keyword" id="q2" />
<button type="submit" class="search-submit">百度一下</button>
</form>
<style type="text/css">
.youa-suggest-container { border-color: #5BA515 }
.youa-suggest-container li { padding: 2px 0 3px; font-size: 14px; line-height: 20px }
.youa-suggest-container li.selected { background-color: #DEEFC5 }
.youa-suggest-container .suggest-result { font-size: 12px; color: #999 }
.youa-suggest-container li.selected span { color: #240055 }
.youa-suggest-container li.selected .suggest-result { color: #999 }
</style>
<script type="text/javascript">
(function() {
// 有啊
var dataUrl = 'http://youa.baidu.com/suggest/se/s';
window.suggestCallback = KISSY.Suggest.callback;
var sug = new KISSY.Suggest('q2', dataUrl, {
containerClass: 'youa-suggest-container'
});
sug.subscribe('beforeDataRequest', function(query) {
this.dataScript.charset = 'GB18030';
this.queryParams = 'cmd=suggest&type=kwd&max_count=10&keyword=' + encodeURIComponent(query) + '&callback=suggestCallback';
});
// youa: suggestCallback({"err":"ok", "r":[{"key":"nike", "val":140000}, {"key":"nike鞋", "val":119000}, {"key":"nike板鞋", "val":44300}, {"key":"nike运动鞋", "val":115000}, {"key":"nike正品", "val":47400}, {"key":"nike包", "val":8300}, {"key":"nike篮球鞋", "val":18400}, {"key":"nike新款", "val":27600}, {"key":"nike 耐克", "val":140000}, {"key":"nike女鞋", "val":7850}], "num":10})
// taobao: KISSY.Suggest.callback({"result": [["nike 正品", "2170000"], ["nike 专柜 正品", "834000"], ["nike 短袖", "242000"], ["nike 板 鞋", "989000"], ["nike 女鞋", "253000"], ["nike 运动鞋", "550000"], ["nike 包", "295000"], ["nike 鞋", "3160000"], ["nike 单肩包", "38500"], ["nike 09", "786000"]]})
sug.subscribe('onDataReturn', function(data) {
data = data['r'] || [];
var result = [];
for (var i = 0, len = data.length; i < len; ++i) {
result.push([data[i]['key'], data[i]['val']]);
}
this.returnedData = result;
});
})();
</script>
</div>
<div class="section" style="width: 380px">
<h2>3. Google Search</h2>
<form name="f" action="http://www.google.com/search">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td width="25%"></td>
<td nowrap="" align="center">
<input type="hidden" value="en" name="hl"/>
<input style="padding: 3px 2px" value="" title="Google Search" size="55" id="gq" name="q" maxlength="2048" autocomplete="off"/>
<br/>
<input type="submit" class="g-submit" onclick="this.checked=1" value="Google Search" name="btnG"/>
<input type="submit" class="g-submit" onclick="this.checked=1" value="I'm Feeling Lucky" name="btnI"/>
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="aq" value="f"/><input type="hidden" name="oq" value="n"/><input type="hidden" name="aqi" value="g10"/>
</form>
<style type="text/css">
.g-sug { border-color: #666 }
.g-sug li { padding: 2px 0 3px }
.g-sug li.selected { background-color: #D5E2FF }
.g-sug li.selected span { color: #240055 }
</style>
<script type="text/javascript">
(function() {
// Google
var dataUrl = 'http://clients1.google.com/complete/search';
window.google = {};
window.google.ac = {};
window.google.ac.h = KISSY.Suggest.callback;
var sug = new KISSY.Suggest('gq', dataUrl,
{
resultFormat: '',
containerClass: 'g-sug'
});
sug.subscribe('beforeDataRequest', function(query) {
this.dataScript.charset = 'utf-8';
this.queryParams = 'hl=en&q=' + encodeURIComponent(query);
});
// google: window.google.ac.h(["ni",[["博网","73,248 结果","0z"],["博网首页","12,200,617 结果","1z"],["你是准备替党说话 还是准备替老百姓说话","136,545 结果","2z"],["nike","117,000,000 结果","3"],["nikon","127,000,000 结果","4"],["nissan","135,000,000 结果","5"],["nine west","40,000,000 结果","6"],["nike鞋","3,380,000 结果","7"],["倪萍 再婚","36,400 结果","8"],["牛年祝福语","582,000 结果","9"]]])
// taobao: KISSY.Suggest.callback({"result": [["nike 正品", "2170000"], ["nike 专柜 正品", "834000"], ["nike 短袖", "242000"], ["nike 板 鞋", "989000"], ["nike 女鞋", "253000"], ["nike 运动鞋", "550000"], ["nike 包", "295000"], ["nike 鞋", "3160000"], ["nike 单肩包", "38500"], ["nike 09", "786000"]]})
sug.subscribe('onDataReturn', function(data) {
this.returnedData = data[1] || [];
});
})();
</script>
</div>
<div class="section">
<h2>4. 来点广告：</h2>
<form name="search3" method="get" action="http://search1.taobao.com/browse/search_auction.htm" target="_blank">
<input class="search-input" name="q" id="q3"/>
<button type="submit" class="search-submit">Search</button>
</form>
<script type="text/javascript">
(function() {
// 广告
var dataUrl = 'http://suggest.taobao.com/sug';
var sug = new KISSY.Suggest('q3', dataUrl,
{ showCloseBtn: true
});
sug.subscribe('beforeShow', function(container) {
var ad = document.createElement('div');
ad.innerHTML = '<a target="_blank" href="http://cn.rd.yahoo.com/SIG=15rc1i6ku/M=737626.13478244.13591643.12449672/D=cntaobao/S=2121060025:TBE1/Y=CN/EXP=1245385302/L=hyh1VsvR9en1pr0GSdrZFg.OeQAd4ko69jYABbb1/B=2wHzHsvR9bY-/J=1245378102375152/K=l5oQqDYguLTtP2x265XY0A/A=5762545/R=0/SIG=112e9jtv1/*http://xiaomihu.mall.taobao.com/"><img height="90" width="270" border="0" src="http://cn.yimg.com/a/amyy/737626_homepage_tbe1_270x90.jpg"/></a>';
container.appendChild(ad);
});
})();
</script>
</div>
</div>
</body>
</html>
?
2 在web.xml加入servlet配置信息，这里将用户的请求异步提交到servlet里处理，再返回json数据，从而实现自动提示功能：
?
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>service.AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
?
3 加入servlet代代码AutoComplete.java：
package service;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class AutoComplete extends HttpServlet {
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<String[]> results = new ArrayList<String[]>();
for(int i = 0 ; i < 10 ; i ++){
String[] str ={"a" + i ,String.valueOf(1 + i)};
results.add(str);
}
String result =new Gson().toJson(results);
// renderJSON("KISSY.Suggest.callback({'result':"+result.replace("\"", "\'")+"})");
response.getWriter().write("KISSY.Suggest.callback({'result':"+result.replace("\"", "\'")+"})");
System.out.println("到了get方法");
//显示的数据格式一：String result = "[['a0','1'],['a1','2'],['a2','3'],['a3','4'],['a4','5'],['a5','6'],['a6','7'],['a7','8'],['a8','9'],['a9','10']]"
//调用方法：response.getWriter().write("KISSY.Suggest.callback({'result':"+result+"})");
//显示数据格式二:String result = "['什么是人','什么是神童','我要说点什么呢？']"
//调用方法:response.getWriter().write("KISSY.Suggest.callback({'result':"+ result +"})");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
System.out.println("到了doPost方法");
}
public void init() throws ServletException {
}
}
?
?
4 引入Kissy Suggest 依赖文件：
?
(1) suggest.js
?
?
/**
* KISSY.Suggest 提示补全组件
*
* suggest.js
* requires: yahoo-dom-event
*
* @author lifesinger@gmail.com
*/
var KISSY = window.KISSY || {};
(function(NS) {
var Y = YAHOO.util, Dom = Y.Dom, Event = Y.Event, Lang = YAHOO.lang,
head = document.getElementsByTagName("head")[0],
ie = YAHOO.env.ua.ie, ie6 = (ie === 6),
CALLBACK_STR = "KISSY.Suggest.callback", // 注意 KISSY 在这里是写死的
STYLE_ID = "suggest-style", // 样式 style 元素的 id
CONTAINER_CLASS = "suggest-container",
KEY_EL_CLASS = "suggest-key", // 提示层中，key 元素的 class
RESULT_EL_CLASS = "suggest-result", // 提示层中，result 元素的 class
SELECTED_ITEM_CLASS = "selected", // 提示层中，选中项的 class
BOTTOM_CLASS = "suggest-bottom",
CLOSE_BTN_CLASS = "suggest-close-btn",
SHIM_CLASS = "suggest-shim", // iframe shim 的 class
BEFORE_DATA_REQUEST = "beforeDataRequest",
ON_DATA_RETURN = "onDataReturn",
BEFORE_SHOW = "beforeShow",
ON_ITEM_SELECT = "onItemSelect",
/**
* Suggest的默认配置
*/
defaultConfig = {
/**
* 用户附加给悬浮提示层的 class
*
* 提示层的默认结构如下：
* <div class="suggest-container [container-class]">
* <ol>
* <li>
* <span class="suggest-key">...</span>
* <span class="suggest-result">...</span>
* </li>
* </ol>
* <div class="suggest-bottom">
* <a class="suggest-close-btn">...</a>
* </div>
* </div>
* @type String
*/
containerClass: "",
/**
* 提示层的宽度
* 注意：默认情况下，提示层的宽度和input输入框的宽度保持一致
* 示范取值："200px", "10%"等，必须带单位
* @type String
*/
containerWidth: "auto",
/**
* result的格式
* @type String
*/
resultFormat: "约%result%条结果",
/**
* 是否显示关闭按钮
* @type Boolean
*/
showCloseBtn: false,
/**
* 关闭按钮上的文字
* @type String
*/
closeBtnText: "关闭",
/**
* 是否需要iframe shim
* @type Boolean
*/
useShim: ie6,
/**
* 定时器的延时
* @type Number
*/
timerDelay: 200,
/**
* 初始化后，自动激活
* @type Boolean
*/
autoFocus: false,
/**
* 鼠标点击完成选择时，是否自动提交表单
* @type Boolean
*/
submitFormOnClickSelect: true
};
/**
* 提示补全组件
* @class Suggest
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @constructor
* @param {String|HTMLElement} textInput
* @param {String} dataSource
* @param {Object} config
*/
NS.Suggest = function(textInput, dataSource, config) {
/**
* 文本输入框
* @type HTMLElement
*/
this.textInput = Dom.get(textInput);
/**
* 获取数据的URL 或 JSON格式的静态数据
* @type {String|Object}
*/
this.dataSource = dataSource;
/**
* JSON静态数据源
* @type Object 格式为 {"query1" : [["key1", "result1"], []], "query2" : [[], []]}
*/
this.JSONDataSource = Lang.isObject(dataSource) ? dataSource : null;
/**
* 通过jsonp返回的数据
* @type Object
*/
this.returnedData = null;
/**
* 配置参数
* @type Object
*/
this.config = Lang.merge(defaultConfig, config || {});
/**
* 存放提示信息的容器
* @type HTMLElement
*/
this.container = null;
/**
* 输入框的值
* @type String
*/
this.query = "";
/**
* 获取数据时的参数
* @type String
*/
this.queryParams = "";
/**
* 内部定时器
* @private
* @type Object
*/
this._timer = null;
/**
* 计时器是否处于运行状态
* @private
* @type Boolean
*/
this._isRunning = false;
/**
* 获取数据的script元素
* @type HTMLElement
*/
this.dataScript = null;
/**
* 数据缓存
* @private
* @type Object
*/
this._dataCache = {};
/**
* 最新script的时间戳
* @type String
*/
this._latestScriptTime = "";
/**
* script返回的数据是否已经过期
* @type Boolean
*/
this._scriptDataIsOut = false;
/**
* 是否处于键盘选择状态
* @private
* @type Boolean
*/
this._onKeyboardSelecting = false;
/**
* 提示层的当前选中项
* @type Boolean
*/
this.selectedItem = null;
// init
this._init();
};
Lang.augmentObject(NS.Suggest.prototype, {
/**
* 初始化方法
* @protected
*/
_init: function() {
// init DOM
this._initTextInput();
this._initContainer();
if (this.config.useShim) this._initShim();
this._initStyle();
// create events
this.createEvent(BEFORE_DATA_REQUEST);
this.createEvent(ON_DATA_RETURN);
this.createEvent(BEFORE_SHOW);
this.createEvent(ON_ITEM_SELECT);
// window resize event
this._initResizeEvent();
},
/**
* 初始化输入框
* @protected
*/
_initTextInput: function() {
var instance = this;
// turn off autocomplete
this.textInput.setAttribute("autocomplete", "off");
// focus
Event.on(this.textInput, "focus", function() {
instance.start();
});
// blur
Event.on(this.textInput, "blur", function() {
instance.stop();
instance.hide();
});
// auto focus
if (this.config.autoFocus) this.textInput.focus();
// keydown
// 注：截至目前，在Opera9.64中，输入法开启时，依旧不会触发任何键盘事件
var pressingCount = 0; // 持续按住某键时，连续触发的keydown次数。注意Opera只会触发一次。
Event.on(this.textInput, "keydown", function(ev) {
var keyCode = ev.charCode || ev.keyCode;
//console.log("keydown " + keyCode);
switch (keyCode) {
case 27: // ESC键，隐藏提示层并还原初始输入
instance.hide();
instance.textInput.value = instance.query;
break;
case 13: // ENTER键
// 提交表单前，先隐藏提示层并停止计时器
instance.textInput.blur(); // 这一句还可以阻止掉浏览器的默认提交事件
// 如果是键盘选中某项后回车，触发onItemSelect事件
if (instance._onKeyboardSelecting) {
if (instance.textInput.value == instance._getSelectedItemKey()) { // 确保值匹配
instance.fireEvent(ON_ITEM_SELECT, instance.textInput.value);
}
}
// 提交表单
instance._submitForm();
break;
case 40: // DOWN键
case 38: // UP键
// 按住键不动时，延时处理
if (pressingCount++ == 0) {
if (instance._isRunning) instance.stop();
instance._onKeyboardSelecting = true;
instance.selectItem(keyCode == 40);
} else if (pressingCount == 3) {
pressingCount = 0;
}
break;
}
// 非 DOWN/UP 键时，开启计时器
if (keyCode != 40 && keyCode != 38) {
if (!instance._isRunning) {
// 1. 当网速较慢，js还未下载完时，用户可能就已经开始输入
// 这时，focus事件已经不会触发，需要在keyup里触发定时器
// 2. 非DOWN/UP键时，需要激活定时器
instance.start();
}
instance._onKeyboardSelecting = false;
}
});
// reset pressingCount
Event.on(this.textInput, "keyup", function() {
//console.log("keyup");
pressingCount = 0;
});
},
/**
* 初始化提示层容器
* @protected
*/
_initContainer: function() {
// create
var container = document.createElement("div"),
customContainerClass = this.config.containerClass;
container.className = CONTAINER_CLASS;
if(customContainerClass) {
container.className += " " + customContainerClass;
}
container.style.position = "absolute";
container.style.visibility = "hidden";
this.container = container;
this._setContainerRegion();
this._initContainerEvent();
// append
document.body.insertBefore(container, document.body.firstChild);
},
/**
* 设置容器的left, top, width
* @protected
*/
_setContainerRegion: function() {
var r = Dom.getRegion(this.textInput);
var left = r.left, w = r.right - left - 2; // 减去border的2px
// ie8兼容模式
// document.documentMode:
// 5 - Quirks Mode
// 7 - IE7 Standards
// 8 - IE8 Standards
var docMode = document.documentMode;
if (docMode === 7 && (ie === 7 || ie === 8)) {
left -= 2;
} else if (YAHOO.env.ua.gecko) { // firefox下左偏一像素 注：当 input 所在的父级容器有 margin: auto 时会出现
left++;
}
this.container.style.left = left + "px";
this.container.style.top = r.bottom + "px";
if (this.config.containerWidth == "auto") {
this.container.style.width = w + "px";
} else {
this.container.style.width = this.config.containerWidth;
}
},
/**
* 初始化容器事件
* 子元素都不用设置事件，冒泡到这里统一处理
* @protected
*/
_initContainerEvent: function() {
var instance = this;
// 鼠标事件
Event.on(this.container, "mousemove", function(ev) {
//console.log("mouse move");
var target = Event.getTarget(ev);
if (target.nodeName != "LI") {
target = Dom.getAncestorByTagName(target, "li");
}
if (Dom.isAncestor(instance.container, target)) {
if (target != instance.selectedItem) {
// 移除老的
instance._removeSelectedItem();
// 设置新的
instance._setSelectedItem(target);
}
}
});
var mouseDownItem = null;
this.container.onmousedown = function(e) {
e = e || window.event;
// 鼠标按下处的item
mouseDownItem = e.target || e.srcElement;
// 鼠标按下时，让输入框不会失去焦点
// 1. for IE
instance.textInput.onbeforedeactivate = function() {
window.event.returnValue = false;
instance.textInput.onbeforedeactivate = null;
};
// 2. for W3C
return false;
};
// mouseup事件
Event.on(this.container, "mouseup", function(ev) {
// 当mousedown在提示层，但mouseup在提示层外时，点击无效
if (!instance._isInContainer(Event.getXY(ev))) return;
var target = Event.getTarget(ev);
// 在提示层A项处按下鼠标，移动到B处释放，不触发onItemSelect
if (target != mouseDownItem) return;
// 点击在关闭按钮上
if (target.className == CLOSE_BTN_CLASS) {
instance.hide();
return;
}
// 可能点击在li的子元素上
if (target.nodeName != "LI") {
target = Dom.getAncestorByTagName(target, "li");
}
// 必须点击在container内部的li上
if (Dom.isAncestor(instance.container, target)) {
instance._updateInputFromSelectItem(target);
// 触发选中事件
//console.log("on item select");
instance.fireEvent(ON_ITEM_SELECT, instance.textInput.value);
// 提交表单前，先隐藏提示层并停止计时器
instance.textInput.blur();
// 提交表单
instance._submitForm();
}
});
},
/**
* click选择 or enter后，提交表单
*/
_submitForm: function() {
// 注：对于键盘控制enter选择的情况，由html自身决定是否提交。否则会导致某些输入法下，用enter选择英文时也触发提交
if (this.config.submitFormOnClickSelect) {
var form = this.textInput.form;
if (!form) return;
// 通过js提交表单时，不会触发onsubmit事件
// 需要js自己触发
if (document.createEvent) { // w3c
var evObj = document.createEvent("MouseEvents");
evObj.initEvent("submit", true, false);
form.dispatchEvent(evObj);
}
else if (document.createEventObject) { // ie
form.fireEvent("onsubmit");
}
form.submit();
}
},
/**
* 判断p是否在提示层内
* @param {Array} p [x, y]
*/
_isInContainer: function(p) {
var r = Dom.getRegion(this.container);
return p[0] >= r.left && p[0] <= r.right && p[1] >= r.top && p[1] <= r.bottom;
},
/**
* 给容器添加iframe shim层
* @protected
*/
_initShim: function() {
var iframe = document.createElement("iframe");
iframe.src = "about:blank";
iframe.className = SHIM_CLASS;
iframe.style.position = "absolute";
iframe.style.visibility = "hidden";
iframe.style.border = "none";
this.container.shim = iframe;
this._setShimRegion();
document.body.insertBefore(iframe, document.body.firstChild);
},
/**
* 设置shim的left, top, width
* @protected
*/
_setShimRegion: function() {
var container = this.container, shim = container.shim;
if (shim) {
shim.style.left = (parseInt(container.style.left) - 2) + "px"; // 解决吞边线bug
shim.style.top = container.style.top;
shim.style.width = (parseInt(container.style.width) + 2) + "px";
}
},
/**
* 初始化样式
* @protected
*/
_initStyle: function() {
var styleEl = Dom.get(STYLE_ID);
if (styleEl) return; // 防止多个实例时重复添加
var style = ".suggest-container{background:white;border:1px solid #999;z-index:99999}";
style += ".suggest-shim{z-index:99998}";
style += ".suggest-container li{color:#404040;padding:1px 0 2px;font-size:12px;line-height:18px;float:left;width:100%}";
style += ".suggest-container li.selected{background-color:#39F;cursor:default}";
style += ".suggest-key{float:left;text-align:left;padding-left:5px}";
style += ".suggest-result{float:right;text-align:right;padding-right:5px;color:green}";
style += ".suggest-container li.selected span{color:#FFF;cursor:default}";
//style += ".suggest-container li.selected .suggest-result{color:green}";
style += ".suggest-bottom{padding:0 5px 5px}";
style += ".suggest-close-btn{float:right}";
style += ".suggest-container li,.suggest-bottom{overflow:hidden;zoom:1;clear:both}";
/* hacks */
style += ".suggest-container{*margin-left:2px;_margin-left:-2px;_margin-top:-3px}";
styleEl = document.createElement("style");
styleEl.id = STYLE_ID;
styleEl.type = "text/css";
head.appendChild(styleEl); // 先添加到DOM树中，都在cssText里的hack会失效
if (styleEl.styleSheet) { // IE
styleEl.styleSheet.cssText = style;
} else { // W3C
styleEl.appendChild(document.createTextNode(style));
}
},
/**
* window.onresize时，调整提示层的位置
* @protected
*/
_initResizeEvent: function() {
var instance = this, resizeTimer;
Event.on(window, "resize", function() {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function() {
instance._setContainerRegion();
instance._setShimRegion();
}, 50);
});
},
/**
* 启动计时器，开始监听用户输入
*/
start: function() {
NS.Suggest.focusInstance = this;
var instance = this;
instance._timer = setTimeout(function() {
instance.updateData();
instance._timer = setTimeout(arguments.callee, instance.config.timerDelay);
}, instance.config.timerDelay);
this._isRunning = true;
},
/**
* 停止计时器
*/
stop: function() {
NS.Suggest.focusInstance = null;
clearTimeout(this._timer);
this._isRunning = false;
},
/**
* 显示提示层
*/
show: function() {
if (this.isVisible()) return;
var container = this.container, shim = container.shim;
container.style.visibility = "";
if (shim) {
if (!shim.style.height) { // 第一次显示时，需要设定高度
var r = Dom.getRegion(container);
shim.style.height = (r.bottom - r.top - 2) + "px";
}
shim.style.visibility = "";
}
},
/**
* 隐藏提示层
*/
hide: function() {
if (!this.isVisible()) return;
var container = this.container, shim = container.shim;
//console.log("hide");
if (shim) shim.style.visibility = "hidden";
container.style.visibility = "hidden";
},
/**
* 提示层是否显示
*/
isVisible: function() {
return this.container.style.visibility != "hidden";
},
/**
* 更新提示层的数据
*/
updateData: function() {
if (!this._needUpdate()) return;
//console.log("update data");
this._updateQueryValueFromInput();
var q = this.query;
// 1. 输入为空时，隐藏提示层
if (!Lang.trim(q).length) {
this._fillContainer("");
this.hide();
return;
}
if (typeof this._dataCache[q] != "undefined") { // 2. 使用缓存数据
//console.log("use cache");
this.returnedData = "using cache";
this._fillContainer(this._dataCache[q]);
this._displayContainer();
} else if (this.JSONDataSource) { // 3. 使用JSON静态数据源
this.handleResponse(this.JSONDataSource[q]);
} else { // 4. 请求服务器数据
this.requestData();
}
},
/**
* 是否需要更新数据
* @protected
* @return Boolean
*/
_needUpdate: function() {
// 注意：加入空格也算有变化
return this.textInput.value != this.query;
},
/**
* 通过script元素加载数据
*/
requestData: function() {
//console.log("request data via script");
if (!ie) this.dataScript = null; // IE不需要重新创建script元素
if (!this.dataScript) {
var script = document.createElement("script");
script.type = "text/javascript";
script.charset = "utf-8";
// jQuery ajax.js line 275:
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used.
head.insertBefore(script, head.firstChild);
this.dataScript = script;
if (!ie) {
var t = new Date().getTime();
this._latestScriptTime = t;
script.setAttribute("time", t);
Event.on(script, "load", function() {
//console.log("on load");
// 判断返回的数据是否已经过期
this._scriptDataIsOut = script.getAttribute("time") != this._latestScriptTime;
}, this, true);
}
}
// 注意：没必要加时间戳，是否缓存由服务器返回的Header头控制
this.queryParams = "q=" + encodeURIComponent(this.query) + "&code=utf-8&callback=" + CALLBACK_STR;
this.fireEvent(BEFORE_DATA_REQUEST, this.query);
this.dataScript.src = this.dataSource + "?" + this.queryParams;
},
/**
* 处理获取的数据
* @param {Object} data
*/
handleResponse: function(data) {
//console.log("handle response");
if (this._scriptDataIsOut) return; // 抛弃过期数据，否则会导致bug：1. 缓存key值不对； 2. 过期数据导致的闪屏
this.returnedData = data;
this.fireEvent(ON_DATA_RETURN, data);
// 格式化数据
this.returnedData = this.formatData(this.returnedData);
// 填充数据
var content = "";
var len = this.returnedData.length;
if (len > 0) {
var list = document.createElement("ol");
for (var i = 0; i < len; ++i) {
var itemData = this.returnedData[i];
var li = this.formatItem(itemData["key"], itemData["result"]);
// 缓存key值到attribute上
li.setAttribute("key", itemData["key"]);
list.appendChild(li);
}
content = list;
}
this._fillContainer(content);
// 有内容时才添加底部
if (len > 0) this.appendBottom();
// fire event
if (Lang.trim(this.container.innerHTML)) {
// 实际上是beforeCache，但从用户的角度看，是beforeShow
this.fireEvent(BEFORE_SHOW, this.container);
}
// cache
this._dataCache[this.query] = this.container.innerHTML;
// 显示容器
this._displayContainer();
},
/**
* 格式化输入的数据对象为标准格式
* @param {Object} data 格式可以有3种：
* 1. {"result" : [["key1", "result1"], ["key2", "result2"], ...]}
* 2. {"result" : ["key1", "key2", ...]}
* 3. 1和2的组合
* 4. 标准格式
* 5. 上面1-4中，直接取o["result"]的值
* @return Object 标准格式的数据：
* [{"key" : "key1", "result" : "result1"}, {"key" : "key2", "result" : "result2"}, ...]
*/
formatData: function(data) {
var arr = [];
if (!data) return arr;
if (Lang.isArray(data["result"])) data = data["result"];
var len = data.length;
if (!len) return arr;
var item;
for (var i = 0; i < len; ++i) {
item = data[i];
if (Lang.isString(item)) { // 只有key值时
arr[i] = {"key" : item};
} else if (Lang.isArray(item) && item.length >= 2) { // ["key", "result"] 取数组前2个
arr[i] = {"key" : item[0], "result" : item[1]};
} else {
arr[i] = item;
}
}
return arr;
},
/**
* 格式化输出项
* @param {String} key 查询字符串
* @param {Number} result 结果 可不设
* @return {HTMLElement}
*/
formatItem: function(key, result) {
var li = document.createElement("li");
var keyEl = document.createElement("span");
keyEl.className = KEY_EL_CLASS;
keyEl.appendChild(document.createTextNode(key));
li.appendChild(keyEl);
if (typeof result != "undefined") { // 可以没有
var resultText = this.config.resultFormat.replace("%result%", result);
if (Lang.trim(resultText)) { // 有值时才创建
var resultEl = document.createElement("span");
resultEl.className = RESULT_EL_CLASS;
resultEl.appendChild(document.createTextNode(resultText));
li.appendChild(resultEl);
}
}
return li;
},
/**
* 添加提示层底部
*/
appendBottom: function() {
var bottom = document.createElement("div");
bottom.className = BOTTOM_CLASS;
if (this.config.showCloseBtn) {
var closeBtn = document.createElement("a");
closeBtn.href = "javascript: void(0)";
closeBtn.setAttribute("target", "_self"); // bug fix: 覆盖<base target="_blank" />，否则会弹出空白页面
closeBtn.className = CLOSE_BTN_CLASS;
closeBtn.appendChild(document.createTextNode(this.config.closeBtnText));
// 没必要，点击时，输入框失去焦点，自动就关闭了
/*
Event.on(closeBtn, "click", function(ev) {
Event.stopEvent(ev);
this.hidden();
}, this, true);
*/
bottom.appendChild(closeBtn);
}
// 仅当有内容时才添加
if (Lang.trim(bottom.innerHTML)) {
this.container.appendChild(bottom);
}
},
/**
* 填充提示层
* @protected
* @param {String|HTMLElement} content innerHTML or Child Node
*/
_fillContainer: function(content) {
if (content.nodeType == 1) {
this.container.innerHTML = "";
this.container.appendChild(content);
} else {
this.container.innerHTML = content;
}
// 一旦重新填充了，selectedItem就没了，需要重置
this.selectedItem = null;
},
/**
* 根据contanier的内容，显示或隐藏容器
*/
_displayContainer: function() {
if (Lang.trim(this.container.innerHTML)) {
this.show();
} else {
this.hide();
}
},
/**
* 选中提示层中的上/下一个条
* @param {Boolean} down true表示down，false表示up
*/
selectItem: function(down) {
//console.log("select item " + down);
var items = this.container.getElementsByTagName("li");
if (items.length == 0) return;
// 有可能用ESC隐藏了，直接显示即可
if (!this.isVisible()){
this.show();
return; // 保留原来的选中状态
}
var newSelectedItem;
// 没有选中项时，选中第一/最后项
if (!this.selectedItem) {
newSelectedItem = items[down ? 0 : items.length - 1];
} else {
// 选中下/上一项
newSelectedItem = Dom[down ? "getNextSibling" : "getPreviousSibling"](this.selectedItem);
// 已经到了最后/前一项时，归位到输入框，并还原输入值
if (!newSelectedItem) {
this.textInput.value = this.query;
}
}
// 移除当前选中项
this._removeSelectedItem();
// 选中新项
if (newSelectedItem) {
this._setSelectedItem(newSelectedItem);
this._updateInputFromSelectItem();
}
},
/**
* 移除选中项
* @protected
*/
_removeSelectedItem: function() {
//console.log("remove selected item");
Dom.removeClass(this.selectedItem, SELECTED_ITEM_CLASS);
this.selectedItem = null;
},
/**
* 设置当前选中项
* @protected
* @param {HTMLElement} item
*/
_setSelectedItem: function(item) {
//console.log("set selected item");
Dom.addClass((item), SELECTED_ITEM_CLASS);
this.selectedItem = (item);
},
/**
* 获取提示层中选中项的key字符串
* @protected
*/
_getSelectedItemKey: function() {
if (!this.selectedItem) return "";
// getElementsByClassName比较损耗性能，改用缓存数据到attribute上方法
//var keyEl = Dom.getElementsByClassName(KEY_EL_CLASS, "*", this.selectedItem)[0];
//return keyEl.innerHTML;
return this.selectedItem.getAttribute("key");
},
/**
* 将textInput的值更新到this.query
* @protected
*/
_updateQueryValueFromInput: function() {
this.query = this.textInput.value;
},
/**
* 将选中项的值更新到textInput
* @protected
*/
_updateInputFromSelectItem: function() {
this.textInput.value = this._getSelectedItemKey(this.selectedItem);
}
});
Lang.augmentProto(NS.Suggest, Y.EventProvider);
/**
* 当前激活的实例
* @static
*/
NS.Suggest.focusInstance = null;
/**
* 从jsonp中获取数据
* @method callback
*/
NS.Suggest.callback = function(data) {
if (!NS.Suggest.focusInstance) return;
// 使得先运行script.onload事件，然后再执行callback函数
setTimeout(function() {
NS.Suggest.focusInstance.handleResponse(data);
}, 0);
};
})(KISSY);
/**
* 小结：
*
* 整个组件代码，由两大部分组成：数据处理 + 事件处理
*
* 一、数据处理很core，但相对来说是简单的，由 requestData + handleResponse + formatData等辅助方法组成
* 需要注意两点：
* a. IE中，改变script.src, 会自动取消掉之前的请求，并发送新请求。非IE中，必须新创建script才行。这是
* requestData方法中存在两种处理方式的原因。
* b. 当网速很慢，数据返回时，用户的输入可能已改变，已经有请求发送出去，需要抛弃过期数据。目前采用加时间戳
* 的解决方案。更好的解决方案是，调整API，使得返回的数据中，带有query值。
*
* 二、事件处理看似简单，实际上有不少陷阱，分2部分：
* 1. 输入框的focus/blur事件 + 键盘控制事件
* 2. 提示层上的鼠标悬浮和点击事件
* 需要注意以下几点：
* a. 因为点击提示层时，首先会触发输入框的blur事件，blur事件中调用hide方法，提示层一旦隐藏后，就捕获不到
* 点击事件了。因此有了 this._mouseHovering 来排除这种情况，使得blur时不会触发hide，在提示层的点击
* 事件中自行处理。（2009-06-18更新：采用mouseup来替代click事件，代码清晰简单了很多）
* b. 当鼠标移动到某项或通过上下键选中某项时，给this.selectedItem赋值；当提示层的数据重新填充时，重置
* this.selectedItem. 这种处理方式和google的一致，可以使得选中某项，隐藏，再次打开时，依旧选中原来
* 的选中项。
* c. 在ie等浏览器中，输入框中输入ENTER键时，会自动提交表单。如果form.target="_blank", 自动提交和JS提交
* 会打开两个提交页面。因此这里采取了在JS中不提交的策略，ENTER键是否提交表单，完全由HTML代码自身决定。这
* 样也能使得组件很容易应用在不需要提交表单的场景中。（2009-06-18更新：可以通过blur()取消掉浏览器的默认
* Enter响应，这样能使得代码逻辑和mouseup的一致）
* d. onItemSelect 仅在鼠标点击选择某项 和 键盘选中某项回车 后触发。
* e. 当textInput会触发表单提交时，在enter keydown 和 keyup之间，就会触发提交。因此在keydown中捕捉事件。
* 并且在keydown中能捕捉到持续DOWN/UP，在keyup中就不行了。
*
* 【得到的一些编程经验】：
* 1. 职责单一原则。方法的职责要单一，比如hide方法和show方法，除了改变visibility, 就不要拥有其它功能。这
* 看似简单，真要做到却并不容易。保持职责单一，保持简单的好处是，代码的整体逻辑更清晰，方法的可复用性也提
* 高了。
* 2. 小心事件处理。当事件之间有关联时，要仔细想清楚，设计好后再写代码。比如输入框的blur和提示层的click事件。
* 3. 测试的重要性。目前是列出Test Cases，以后要尝试自动化。保证每次改动后，都不影响原有功能。
* 4. 挑选正确的事件做正确的事，太重要了，能省去很多很多烦恼。
*
*/
/**
* 2009-08-05 更新： 将 class 从配置项中移动到常量，原因是：修改默认 className 的可能性很小，仅保留一个
* containerClass 作为个性化样式的接口即可
*/
?
(2)?yahoo-dom-event.js
?
/*
* Copyright (c) 2009, Yahoo! Inc. All rights reserved. Code licensed under the
* BSD License: http://developer.yahoo.net/yui/license.txt Download by
* http://www.codefans.net version: 2.7.0
*/
if (typeof YAHOO == "undefined" || !YAHOO) {
var YAHOO = {};
}
YAHOO.namespace = function() {
var A = arguments, E = null, C, B, D;
for (C = 0; C < A.length; C = C + 1) {
D = ("" + A[C]).split(".");
E = YAHOO;
for (B = (D[0] == "YAHOO") ? 1 : 0; B < D.length; B = B + 1) {
E[D[B]] = E[D[B]] || {};
E = E[D[B]];
}
}
return E;
};
YAHOO.log = function(D, A, C) {
var B = YAHOO.widget.Logger;
if (B && B.log) {
return B.log(D, A, C);
} else {
return false;
}
};
YAHOO.register = function(A, E, D) {
var I = YAHOO.env.modules, B, H, G, F, C;
if (!I[A]) {
I[A] = {
versions : [],
builds : []
};
}
B = I[A];
H = D.version;
G = D.build;
F = YAHOO.env.listeners;
B.name = A;
B.version = H;
B.build = G;
B.versions.push(H);
B.builds.push(G);
B.mainClass = E;
for (C = 0; C < F.length; C = C + 1) {
F[C](B);
}
if (E) {
E.VERSION = H;
E.BUILD = G;
} else {
YAHOO.log("mainClass is undefined for module " + A, "warn");
}
};
YAHOO.env = YAHOO.env || {
modules : [],
listeners : []
};
YAHOO.env.getVersion = function(A) {
return YAHOO.env.modules[A] || null;
};
YAHOO.env.ua = function() {
var C = {
ie : 0,
opera : 0,
gecko : 0,
webkit : 0,
mobile : null,
air : 0,
caja : 0
}, B = navigator.userAgent, A;
if ((/KHTML/).test(B)) {
C.webkit = 1;
}
A = B.match(/AppleWebKit\/([^\s]*)/);
if (A && A[1]) {
C.webkit = parseFloat(A[1]);
if (/ Mobile\//.test(B)) {
C.mobile = "Apple";
} else {
A = B.match(/NokiaN[^\/]*/);
if (A) {
C.mobile = A[0];
}
}
A = B.match(/AdobeAIR\/([^\s]*)/);
if (A) {
C.air = A[0];
}
}
if (!C.webkit) {
A = B.match(/Opera[\s\/]([^\s]*)/);
if (A && A[1]) {
C.opera = parseFloat(A[1]);
A = B.match(/Opera Mini[^;]*/);
if (A) {
C.mobile = A[0];
}
} else {
A = B.match(/MSIE\s([^;]*)/);
if (A && A[1]) {
C.ie = parseFloat(A[1]);
} else {
A = B.match(/Gecko\/([^\s]*)/);
if (A) {
C.gecko = 1;
A = B.match(/rv:([^\s\)]*)/);
if (A && A[1]) {
C.gecko = parseFloat(A[1]);
}
}
}
}
}
A = B.match(/Caja\/([^\s]*)/);
if (A && A[1]) {
C.caja = parseFloat(A[1]);
}
return C;
}();
(function() {
YAHOO.namespace("util", "widget", "example");
if ("undefined" !== typeof YAHOO_config) {
var B = YAHOO_config.listener, A = YAHOO.env.listeners, D = true, C;
if (B) {
for (C = 0; C < A.length; C = C + 1) {
if (A[C] == B) {
D = false;
break;
}
}
if (D) {
A.push(B);
}
}
}
})();
YAHOO.lang = YAHOO.lang || {};
(function() {
var B = YAHOO.lang, F = "[object Array]", C = "[object Function]", A = Object.prototype, E = [
"toString", "valueOf"], D = {
isArray : function(G) {
return A.toString.apply(G) === F;
},
isBoolean : function(G) {
return typeof G === "boolean";
},
isFunction : function(G) {
return A.toString.apply(G) === C;
},
isNull : function(G) {
return G === null;
},
isNumber : function(G) {
return typeof G === "number" && isFinite(G);
},
isObject : function(G) {
return (G && (typeof G === "object" || B.isFunction(G))) || false;
},
isString : function(G) {
return typeof G === "string";
},
isUndefined : function(G) {
return typeof G === "undefined";
},
_IEEnumFix : (YAHOO.env.ua.ie) ? function(I, H) {
var G, K, J;
for (G = 0; G < E.length; G = G + 1) {
K = E[G];
J = H[K];
if (B.isFunction(J) && J != A[K]) {
I[K] = J;
}
}
} : function() {
},
extend : function(J, K, I) {
if (!K || !J) {
throw new Error("extend failed, please check that "
+ "all dependencies are included.");
}
var H = function() {
}, G;
H.prototype = K.prototype;
J.prototype = new H();
J.prototype.constructor = J;
J.superclass = K.prototype;
if (K.prototype.constructor == A.constructor) {
K.prototype.constructor = K;
}
if (I) {
for (G in I) {
if (B.hasOwnProperty(I, G)) {
J.prototype[G] = I[G];
}
}
B._IEEnumFix(J.prototype, I);
}
},
augmentObject : function(K, J) {
if (!J || !K) {
throw new Error("Absorb failed, verify dependencies.");
}
var G = arguments, I, L, H = G[2];
if (H && H !== true) {
for (I = 2; I < G.length; I = I + 1) {
K[G[I]] = J[G[I]];
}
} else {
for (L in J) {
if (H || !(L in K)) {
K[L] = J[L];
}
}
B._IEEnumFix(K, J);
}
},
augmentProto : function(J, I) {
if (!I || !J) {
throw new Error("Augment failed, verify dependencies.");
}
var G = [J.prototype, I.prototype], H;
for (H = 2; H < arguments.length; H = H + 1) {
G.push(arguments[H]);
}
B.augmentObject.apply(this, G);
},
dump : function(G, L) {
var I, K, N = [], O = "{...}", H = "f(){...}", M = ", ", J = " => ";
if (!B.isObject(G)) {
return G + "";
} else {
if (G instanceof Date || ("nodeType" in G && "tagName" in G)) {
return G;
} else {
if (B.isFunction(G)) {
return H;
}
}
}
L = (B.isNumber(L)) ? L : 3;
if (B.isArray(G)) {
N.push("[");
for (I = 0, K = G.length; I < K; I = I + 1) {
if (B.isObject(G[I])) {
N.push((L > 0) ? B.dump(G[I], L - 1) : O);
} else {
N.push(G[I]);
}
N.push(M);
}
if (N.length > 1) {
N.pop();
}
N.push("]");
} else {
N.push("{");
for (I in G) {
if (B.hasOwnProperty(G, I)) {
N.push(I + J);
if (B.isObject(G[I])) {
N.push((L > 0) ? B.dump(G[I], L - 1) : O);
} else {
N.push(G[I]);
}
N.push(M);
}
}
if (N.length > 1) {
N.pop();
}
N.push("}");
}
return N.join("");
},
substitute : function(V, H, O) {
var L, K, J, R, S, U, Q = [], I, M = "dump", P = " ", G = "{", T = "}", N;
for (;;) {
L = V.lastIndexOf(G);
if (L < 0) {
break;
}
K = V.indexOf(T, L);
if (L + 1 >= K) {
break;
}
I = V.substring(L + 1, K);
R = I;
U = null;
J = R.indexOf(P);
if (J > -1) {
U = R.substring(J + 1);
R = R.substring(0, J);
}
S = H[R];
if (O) {
S = O(R, S, U);
}
if (B.isObject(S)) {
if (B.isArray(S)) {
S = B.dump(S, parseInt(U, 10));
} else {
U = U || "";
N = U.indexOf(M);
if (N > -1) {
U = U.substring(4);
}
if (S.toString === A.toString || N > -1) {
S = B.dump(S, parseInt(U, 10));
} else {
S = S.toString();
}
}
} else {
if (!B.isString(S) && !B.isNumber(S)) {
S = "~-" + Q.length + "-~";
Q[Q.length] = I;
}
}
V = V.substring(0, L) + S + V.substring(K + 1);
}
for (L = Q.length - 1; L >= 0; L = L - 1) {
V = V.replace(new RegExp("~-" + L + "-~"), "{" + Q[L] + "}",
"g");
}
return V;
},
trim : function(G) {
try {
return G.replace(/^\s+|\s+$/g, "");
} catch (H) {
return G;
}
},
merge : function() {
var J = {}, H = arguments, G = H.length, I;
for (I = 0; I < G; I = I + 1) {
B.augmentObject(J, H[I], true);
}
return J;
},
later : function(N, H, O, J, K) {
N = N || 0;
H = H || {};
var I = O, M = J, L, G;
if (B.isString(O)) {
I = H[O];
}
if (!I) {
throw new TypeError("method undefined");
}
if (!B.isArray(M)) {
M = [J];
}
L = function() {
I.apply(H, M);
};
G = (K) ? setInterval(L, N) : setTimeout(L, N);
return {
interval : K,
cancel : function() {
if (this.interval) {
clearInterval(G);
} else {
clearTimeout(G);
}
}
};
},
isValue : function(G) {
return (B.isObject(G) || B.isString(G) || B.isNumber(G) || B
.isBoolean(G));
}
};
B.hasOwnProperty = (A.hasOwnProperty) ? function(G, H) {
return G && G.hasOwnProperty(H);
} : function(G, H) {
return !B.isUndefined(G[H]) && G.constructor.prototype[H] !== G[H];
};
D.augmentObject(B, D, true);
YAHOO.util.Lang = B;
B.augment = B.augmentProto;
YAHOO.augment = B.augmentProto;
YAHOO.extend = B.extend;
})();
YAHOO.register("yahoo", YAHOO, {
version : "2.7.0",
build : "1796"
});
(function() {
YAHOO.env._id_counter = YAHOO.env._id_counter || 0;
var E = YAHOO.util, L = YAHOO.lang, m = YAHOO.env.ua, A = YAHOO.lang.trim, d = {}, h = {}, N = /^t(?:able|d|h)$/i, X = /color$/i, K = window.document, W = K.documentElement, e = "ownerDocument", n = "defaultView", v = "documentElement", t = "compatMode", b = "offsetLeft", P = "offsetTop", u = "offsetParent", Z = "parentNode", l = "nodeType", C = "tagName", O = "scrollLeft", i = "scrollTop", Q = "getBoundingClientRect", w = "getComputedStyle", a = "currentStyle", M = "CSS1Compat", c = "BackCompat", g = "class", F = "className", J = "", B = " ", s = "(?:^|\\s)", k = "(?= |$)", U = "g", p = "position", f = "fixed", V = "relative", j = "left", o = "top", r = "medium", q = "borderLeftWidth", R = "borderTopWidth", D = m.opera, I = m.webkit, H = m.gecko, T = m.ie;
E.Dom = {
CUSTOM_ATTRIBUTES : (!W.hasAttribute) ? {
"for" : "htmlFor",
"class" : F
} : {
"htmlFor" : "for",
"className" : g
},
get : function(y) {
var AA, Y, z, x, G;
if (y) {
if (y[l] || y.item) {
return y;
}
if (typeof y === "string") {
AA = y;
y = K.getElementById(y);
if (y && y.id === AA) {
return y;
} else {
if (y && K.all) {
y = null;
Y = K.all[AA];
for (x = 0, G = Y.length; x < G; ++x) {
if (Y[x].id === AA) {
return Y[x];
}
}
}
}
return y;
}
if (y.DOM_EVENTS) {
y = y.get("element");
}
if ("length" in y) {
z = [];
for (x = 0, G = y.length; x < G; ++x) {
z[z.length] = E.Dom.get(y[x]);
}
return z;
}
return y;
}
return null;
},
getComputedStyle : function(G, Y) {
if (window[w]) {
return G[e][n][w](G, null)[Y];
} else {
if (G[a]) {
return E.Dom.IE_ComputedStyle.get(G, Y);
}
}
},
getStyle : function(G, Y) {
return E.Dom.batch(G, E.Dom._getStyle, Y);
},
_getStyle : function() {
if (window[w]) {
return function(G, y) {
y = (y === "float") ? y = "cssFloat" : E.Dom._toCamel(y);
var x = G.style[y], Y;
if (!x) {
Y = G[e][n][w](G, null);
if (Y) {
x = Y[y];
}
}
return x;
};
} else {
if (W[a]) {
return function(G, y) {
var x;
switch (y) {
case "opacity" :
x = 100;
try {
x = G.filters["DXImageTransform.Microsoft.Alpha"].opacity;
} catch (z) {
try {
x = G.filters("alpha").opacity;
} catch (Y) {
}
}
return x / 100;
case "float" :
y = "styleFloat";
default :
y = E.Dom._toCamel(y);
x = G[a] ? G[a][y] : null;
return (G.style[y] || x);
}
};
}
}
}(),
setStyle : function(G, Y, x) {
E.Dom.batch(G, E.Dom._setStyle, {
prop : Y,
val : x
});
},
_setStyle : function() {
if (T) {
return function(Y, G) {
var x = E.Dom._toCamel(G.prop), y = G.val;
if (Y) {
switch (x) {
case "opacity" :
if (L.isString(Y.style.filter)) {
Y.style.filter = "alpha(opacity=" + y * 100
+ ")";
if (!Y[a] || !Y[a].hasLayout) {
Y.style.zoom = 1;
}
}
break;
case "float" :
x = "styleFloat";
default :
Y.style[x] = y;
}
} else {
}
};
} else {
return function(Y, G) {
var x = E.Dom._toCamel(G.prop), y = G.val;
if (Y) {
if (x == "float") {
x = "cssFloat";
}
Y.style[x] = y;
} else {
}
};
}
}(),
getXY : function(G) {
return E.Dom.batch(G, E.Dom._getXY);
},
_canPosition : function(G) {
return (E.Dom._getStyle(G, "display") !== "none" && E.Dom._inDoc(G));
},
_getXY : function() {
if (K[v][Q]) {
return function(y) {
var z, Y, AA, AF, AE, AD, AC, G, x, AB = Math.floor, AG = false;
if (E.Dom._canPosition(y)) {
AA = y[Q]();