Kissy Suggest 自动提示例子
由淘宝团队开发出来的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 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" method="get" action="http://search1.taobao.com/browse/search_auction.htm"> <input name="myq" id="myq" method="get" action="http://youa.baidu.com/search/s" target="_blank"> <input name="keyword" id="q2" /> <button type="submit" 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" onclick="this.checked=1" value="Google Search" name="btnG"/> <input type="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 method="get" action="http://search1.taobao.com/browse/search_auction.htm" target="_blank"> <input name="q" id="q3"/> <button type="submit" 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 : [["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]();