<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB18030" />
<title>Suggest Test</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: 950px; margin: 0 auto; line-height: 18px; }
h1, h2, h3 { margin: 1em 0 0.3em; }
.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; }
html { overflow-y: scroll; }
</style>
</head>
<body>
<div id="page">
<h1>Suggest: </h1>
<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">Search</button>
</form>
<div class="section">
<h2>Features:</h2>
<ol>
<li>提示补全基本功能</li>
<li>完全跨域</li>
<li>小巧精简，仅依赖yui-dom-event, 压缩后不超过15k</li>
<li>支持所有A级浏览器</li>
<li>cache功能</li>
<li>支持键盘控制：上下选择及回车后直接提交，ESC键关闭</li>
<li>支持鼠标控制：鼠标选择和点击提交功能</li>
<li>支持JSON静态数据源</li>
<li>[DELAY] 支持匹配文字加亮</li>
<li>[DELAY] 动画效果</li>
<li>[DELAY] 在提示层中显示第一个搜索结果</li>
<li>[DELAY] 整合本地表单的提示记录</li>
<li>[DELAY] 关键词的模糊匹配提示功能</li>
</ol>
</div>
<div class="section">
<h2>Test Cases:</h2>
<ol>
<li>基本功能：输入时有提示，键盘操作，鼠标操作，点击提交按钮可正常提交</li>
<li>用Del或Backspace键将输入清空时，提示层隐藏</li>
<li>当返回结果为空时，提示层隐藏</li>
<li>点击提示层外面，能关闭提示层</li>
<li>ESC键能关闭提示层。并且当有选中项时，能还原输入值</li>
<li>鼠标悬浮在提示层，继续输入时，取消选中项</li>
<li>服务器超慢的处理（抛弃旧请求，只显示最新结果）</li>
<li>鼠标选中某项+点击 or 键盘选中某项+回车 时，会触发onItemSelect</li>
<li>先用鼠标选中某项，然后从侧边绕过提示层移动到输入框，ENTER提交，不触发onItemSelect</li>
<li>服务器超时和返回错误数据时的容错</li>
<li>鼠标点击选中，提交表单时，能触发form的onsubmit事件</li>
<li>ie6下，能覆盖select</li>
<li>在主流输入法开启时测试</li>
<li>在所有A级浏览器下测试</li>
<li>持续按下DOWN/UP键时，选中操作正常（注意Opera下无效）</li>
<li>在提示层任意处按下鼠标，保持按住状态，移动到提示层外释放鼠标，这时输入框应该保持focus状态</li>
<li>在提示层A项处按下鼠标，移动到B处释放，不触发onItemSelect</li>
<li>在提示层A项处按下鼠标，移动鼠标到其它地方，最后移动回A处释放，触发onItemSelect</li>
<li>输入法开启，通过enter键输入英文时，不会触发提交</li>
<li>选中某项，ESC键关闭，再次通过keydown打开时，能保持原来的选中项</li>
<li>没有选中项，ESC键关闭，再次通过keydown打开时，依旧没有选中项</li>
</ol>
</div>
<div class="section">
<h2>References:</h2>
<ol>
<li><a href="http://www.cnbeta.com/articles/84703.htm">Google搜索建议升级</a></li>
<li><a href="http://developer.yahoo.com/yui/autocomplete/">YUI AutoComplete</a></li>
</ol>
</div>
<div class="section">
<h2>Crazy Test:</h2>
<h3>1. beforeDataRequest 和 onDataReturn 事件：（请输入pig）</h3>
<form name="search2" method="get" action="http://search1.taobao.com/browse/search_auction.htm" target="_blank">
<input class="search-input" name="q" id="q2"/>
<button type="submit" class="search-submit">Search</button>
</form>
<h3>2. beforeShow 和 onItemSelect 事件：</h3>
<form name="search3" method="get" action="http://search1.taobao.com/browse/search_auction.htm">
<input class="search-input" name="q" id="q3"/>
<button type="submit" class="search-submit">Search</button>
</form>
<h3>3. 测试提示层宽度和遮罩：</h3>
<form name="search4" method="get" action="http://search1.taobao.com/browse/search_auction.htm" target="_blank">
<input name="q" id="q4" style="margin-left: 100px" />
<button type="submit">Search</button>
</form>
<br>
<select>
<option>你能把我遮罩住吗，嘿嘿 你能把我遮罩住吗你能把我遮罩住吗</option>
</select>
<br>
<br>
<iframe src="about:blank"></iframe>
<h3>4. 测试JSON数据源：（请输入 nike 或 nokia ）</h3>
<form name="search4" method="get" action="http://search1.taobao.com/browse/search_auction.htm" target="_blank">
<input class="search-input" name="q" id="q5"/>
<button type="submit" class="search-submit">Search</button>
</form>
<h3>5. 输入框的提示：（请输入 nike 或 nokia）</h3>
<input class="search-input" id="q6" />
<h3>6. 有啊有啊哈哈哈：</h3>
<form name="search7" method="get" action="http://youa.baidu.com/search/s" target="_blank">
<input class="search-input" name="keyword" id="q7" />
<button type="submit" class="search-submit">百度一下</button>
</form>
</div>
</div>
<script type="text/javascript">
var dataUrl = 'http://suggest.taobao.com/sug';
//var dataUrl = 'http://t-yubo/work/lab/suggest/sug.php';
//var dataUrl = 'http://192.168.208.18:8090/sug';
// 淘宝首页的情况
var sug = new KISSY.Suggest('q', dataUrl,
{ autoFocus: true,
resultFormat: '约%result%个宝贝'
});
// 添加搜索布点参数
var ssid = sug.textInput.form.ssid;
if (ssid) {
setTimeout(function() {
sug.textInput.form.reset();
}, 0); // ie no cache
ssid.setAttribute('autocomplete', 'off'); // w3c no cache
sug.subscribe('onItemSelect', function() {
if (ssid.value.indexOf('-p1') == -1) {
ssid.value += '-p1';
}
});
}
// 测试事件
var sug2 = new KISSY.Suggest('q2', dataUrl);
sug2.subscribe('beforeDataRequest', function(query) {
if(query == 'pig') {
alert('你输入的是：' + query);
}
});
sug2.subscribe('onDataReturn', function(data) {
if(this.query == 'pig') {
alert('返回的数据是：' + YAHOO.lang.dump(data));
}
});
// 测试事件2
var sug3 = new KISSY.Suggest('q3', dataUrl);
sug3.subscribe('beforeShow', function(container) {
container.appendChild(document.createTextNode('我是天下无敌的广告'));
});
sug3.subscribe('onItemSelect', function(query) {
alert('你选中了：' + query);
});
// 测试配置参数
var sug4 = new KISSY.Suggest('q4', dataUrl, {
containerWidth: '200px',
showCloseBtn: true
});
// 测试JSON数据源
var jsonData = {};
jsonData['nike'] = [
["nike
KISSY.Suggest 仿百度、淘宝输入提示补全功能的组件及实例
5星 · 超过95%的资源 需积分: 10 17 浏览量
2010-06-08
11:11:02
上传
评论 1
收藏 29KB RAR 举报 
KISSY.Suggest 仿百度、淘宝输入提示补全功能的组件及实例.rar （5个子文件） 
codefans.net suggest 
test.html 11KB
suggest.js 34KB reset-grids-min.css 1KB yahoo-dom-event.js 36KB index.html 9KB
- 1
- 2
前往页