demo.html | searchcode

/src/suggest/demo.html

http://kissy.googlecode.com/
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>