/src/suggest/demo.html
HTML | 175 lines | 162 code | 13 blank | 0 comment | 0 complexity | ca3dab1a202ba2e6d47cea241b3dd69c MD5 | raw file
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Suggest Examples</title>
- <link rel="stylesheet" href="../../build/cssreset-grids/reset-grids-min.css" />
- <script src="../../build/kissy.js"></script>
- <script src="suggest.js"></script>
- <style>
- #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: 3px 2px 2px 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">
- <h2>??????????</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>
- KISSY.ready(function(S) {
- S.Suggest('#q', 'http://suggest.taobao.com/sug', {
- autoFocus: true,
- resultFormat: '?%result%???',
- shim: false
- });
- });
- </script>
- </div>
- <div class="section">
- <h2>??????????</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>
- .youa-suggest-container { border-color: #5BA515 }
- .youa-suggest-container li { padding: 2px 0 3px; font-size: 14px; line-height: 20px }
- .youa-suggest-container .ks-selected { background-color: #DEEFC5 }
- .youa-suggest-container .ks-suggest-result { font-size: 12px; color: #999 }
- .youa-suggest-container .ks-selected span { color: #240055 }
- .youa-suggest-container .ks-selected .ks-suggest-result { color: #999 }
- </style>
- <script>
- KISSY.ready(function(S) {
- // ??
- // http://youa.baidu.com/suggest/se/s?cmd=suggest&type=kwd&max_count=10&callback=suggestCallback&keyword=n
- var dataUrl = 'http://youa.baidu.com/suggest/se/s?cmd=suggest&type=kwd&max_count=10';
- var sug = new S.Suggest('#q2', dataUrl, {
- containerCls: 'youa-suggest-container',
- charset: 'gbk',
- callbackFn: 'suggestCallback',
- queryName: 'keyword'
- });
- // 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: g_ks_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.on('dataReturn', function() {
- var data = this.returnedData['r'] || [], 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">
- <h2>Baidu Search:</h2>
- <div id="bds">
- <form action="s" name="f">
- <input class="search-input" type="text" maxlength="100" id="kw" name="wd" autocomplete="off">
- <input type="submit" id="su" value="????">
- </form>
- </div>
- <style>
- .bd-sug { border-color: #666 }
- .bd-sug li { padding: 2px 0 3px }
- .bd-sug .ks-selected { background-color: #D5E2FF }
- .bd-sug .ks-selected span { color: #240055 }
- </style>
- <script>
- KISSY.ready(function(S) {
- // Baidu
- var dataUrl = 'http://suggestion.baidu.com/su?p=3&cb=window.bdsug.sug';
- var sug = new S.Suggest('#kw', dataUrl, {
- resultFormat: '',
- containerCls: 'bd-sug',
- charset: 'gb2312',
- queryName: 'wd',
- callbackFn: 'bdsug.sug'
- });
- // baidu: window.bdsug.sug({q:"nike",p:true,s:["nike??","?????","??","????","????","nike?","nike ??","??","nike?","nike360"]});
- // taobao: g_ks_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.on('dataReturn', function() {
- this.returnedData = this.returnedData.s || [];
- });
- });
- </script>
- </div>
- <div class="section" style="width: 380px">
- <h2>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 class="search-input" 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>
- .g-sug { border-color: #666 }
- .g-sug li { padding: 2px 0 3px }
- .g-sug .ks-selected { background-color: #D5E2FF }
- .g-sug .ks-selected span { color: #240055 }
- </style>
- <script>
- KISSY.ready(function(S) {
- // Google
- var dataUrl = 'http://clients1.google.com/complete/search?hl=en';
- var sug = new S.Suggest('#gq', dataUrl, {
- resultFormat: '',
- containerCls: 'g-sug',
- callbackFn: 'google.ac.h'
- });
- // 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: g_ks_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.on('dataReturn', function() {
- this.returnedData = this.returnedData[1] || [];
- });
- });
- </script>
- </div>
- </div>
- </body>
- </html>