在手机上实现搜索框 + 多列下拉列表

最近在做这个功能,但又不想用太大的框架,怕手机上慢,于是参考了一下东方财富的手机版,做个记号(以下js代码,略有删减)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 
</head>
<body >
<div id="searchbox">
        <form method="post" action="/Search.aspx">
            <input type="text" class="txt" autocomplete="off" name="keyword" id="stock_keyword" onblur="if(this.value == ‘‘){ this.value = ‘输入名称、简码‘;}" onfocus="if(this.value == ‘输入名称、简码‘){ this.value = ‘‘;}" value="输入名称、简码" placeholder="">
            <input type="hidden" value="1" name="searchtype">
<input  id="stocks" value="1" name="searchtype2">
        </form>
    </div>
<script src="StockSuggest.js?v=2014" type="text/javascript"></script>
<script>
    var arg = {
        text: "输入名称、简码",
        autoSubmit: false,
        width: 195,
        header: ["货号", "代码", "名称", "类型"],
        body: [-1, 1, 4, -2],
        type: "ABHKSTOCK",
        callback: function(arg) { }
    };
    var ss = new StockSuggest("stock_keyword", arg);
    </script>
</body>

 

StockSuggest.js

(function() {
    var e = {
        create: function() {
            return function() {
                this.initialize.apply(this, arguments)
            }
        }
    };
    Object.extend = function(e, t) {
        for (property in t) e[property] = t[property];
        return e
    };
    var t = e.create();
    Object.extend(Function.prototype, {
        bind: function() {
            var e = this,
            t = arguments[0],
            n = new Array;
            for (var r = 1; r < arguments.length; r++) n.push(arguments[r]);
            return function() {
                return e.apply(t, n)
            }
        }
    }),
    Object.extend(t.prototype, {
        initialize: function() {},
        Browser: {
            IE: !!window.attachEvent && navigator.userAgent.indexOf("Opera") === -1,
            Opera: navigator.userAgent.indexOf("Opera") > -1,
            WebKit: navigator.userAgent.indexOf("AppleWebKit/") > -1,
            Gecko: navigator.userAgent.indexOf("Gecko") > -1 && navigator.userAgent.indexOf("KHTML") === -1,
            MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
        },
        $: function(e) {
            return typeof e == "string" ? document.getElementById(e) : e
        },
        $Tag: function(e) {
            return typeof e == "string" ? document.getElementsByTagName(e) : e
        },
        $C: function(e) {
            return document.createElement(e)
        },
        $E: function(e) {
            return tempObj = e.target ? e.target: event.srcElement,
            tempObj
        },
        $aE: function(e, t, n, r) {
            if (e.addEventListener) return e.addEventListener(t, n, r),
            !0;
            if (e.attachEvent) {
                var i = e.attachEvent("on" + t, n);
                return i
            };
            e["on" + t] = n
        },
        $dE: function(e, t, n, r) {
            if (e.removeEventListener) return e.removeEventListener(t, n, r),
            !0;
            if (e.detachEvent) {
                var i = e.detachEvent("on" + t, n);
                return i
            };
            e["on" + t] = null;
            return
        },
        stopBubble: function(e) {
            this.Browser.IE ? window.event.cancelBubble = !0 : e.stopPropagation()
        },
        isNullorEmpty: function(e) {
            return e == null || e == "" || e == "undefined" ? !0 : !1
        },
        getXY: function(e) {
            var t = 0,
            n = 0,
            r;
            if (e.offsetParent) {
                do {
                    t += e.offsetLeft, n += e.offsetTop;
                    if (this.getStyle(e, "position") == "relative") {
                        if (r = this.getStyle(e, "border-top-width")) n += parseInt(r);
                        if (r = this.getStyle(e, "border-left-width")) t += parseInt(r);
                        break
                    }
                } while ( e = e . offsetParent )
            } else e.x && (t += e.x, n += e.y);
            return {
                x: t,
                y: n
            }
        },
        getStyle: function(e, t) {
            if (e.currentStyle) return e.currentStyle[t];
            if (window.getComputedStyle) return document.defaultView.getComputedStyle(e, null).getPropertyValue(t)
        }
    });
    var n = new t,
    r = e.create();
    Object.extend(r.prototype, {
        initialize: function(e, t) {
            this.input = e,
            this.dataurl = "http://suggest.eastmoney.com/SuggestData/Default.aspx?name={#NAME}&input={#KEY}&type={#TYPE}&r={#RND}",
            n.isNullorEmpty(t.dataurl) || (this.dataurl = t.dataurl),
            this.autoSubmit = n.isNullorEmpty(t.autoSubmit) ? !1 : t.autoSubmit,
            this.type = n.isNullorEmpty(t.type) ? "": t.type,
            this.link = n.isNullorEmpty(t.link) ? "": t.link,
            this.width = n.isNullorEmpty(t.width) ? "": t.width,
            this.opacity = n.isNullorEmpty(t.opacity) ? 1 : t.opacity,
            this.className = n.isNullorEmpty(t.className) ? "": t.className,
            this.max = n.isNullorEmpty(t.max) ? 10 : t.max,
            this.text = n.isNullorEmpty(t.text) ? "请输入...": t.text,
            this.header = n.isNullorEmpty(t.header) ? ["A", "B", "C"] : t.header,
            this.body = n.isNullorEmpty(t.body) ? [ - 1, 1, 4] : t.body,
            this.callback = t.callback == null || t.callback == "undefined" ? null: t.callback,
            this.showAd = t.showAd == null || t.showAd == "undefined" ? !0 : t.showAd,
            this.results = null,
            this._D = null,
            this._F = null,
            this._R = null,
            this._W = null,
            this._X = {},
            this._Y = {},
            this._hidden = !1,
            this.Market = "",
            this.mType = "",
            this.SName = "",
            this._iF = null,
            this._iN = null,
            this._iC = null,
            this._oForm = null,
            this.StockType = {
                0 : "未知"
            },
            this.ShowType = {
                ABSTOCK: "1,2,3",
                CNSTOCK: "1,2,3,10,50,55,56",
                CNFUND: "11,12,13,14,15,16",
                HKSTOCK: "21,22",
                USASTOCK: "31",
                STOCK: "1,2,3,10,11,12,13,14,15,16,21,22,31,40,50,51,55,56",
                ABHKSTOCK: "1,2,3,21,55,56"
            },
            this.init()
        },
        init: function() {
            this._Y = {},
            this.input = typeof this.input == "string" ? n.$(this.input) : this.input;
            if (this.input) {
                if (this._F == null) {
                    var e = this.input.parentNode;
                    while (e.nodeName.toLowerCase() == "form" && e.nodeName.toLowerCase() == "body") e = e.parentNode;
                    if (e.nodeName.toLowerCase() == "form") this._oForm = {
                        action: e.action,
                        target: e.target,
                        method: e.method,
                        onsubmit: e.onsubmit
                    },
                    this._F = e;
                    else {
                        this._F = n.$C("form"),
                        this._F.method = "get",
                        this.autoSubmit ? this._F.target = "_blank": (this._F.target = "_self", this._F.onsubmit = function() {
                            return ! 1
                        }),
                        this.input.parentNode.insertBefore(this._F, this.input);
                        var t = this.input;
                        this.input.parentNode.removeChild(this.input),
                        this._F.appendChild(t)
                    }
                };
                this.autoSubmit && (this._F.onsubmit = function() {
                    return ! 1
                }),
                this.input.value = this.text,
                //document.getElementById("stocks").value=this.text;
                this.input.setAttribute("autocomplete", "off"),
                this.input.autoComplete = "off",
                this._iF = this._bd(this.inputFocus),
                this._iN = this._bd(this.Navigate),
                this._iC = this._bd(this.Confirm),
                n.$aE(this.input, "focus", this._iF),
                n.$aE(this.input, "blur", this._iF),
                n.$aE(this.input, "keyup", this._iN),
                this.autoSubmit && n.$aE(this.input, "keydown", this._iC),
                n.$aE(this.input, "mouseup", this._iN)
            }
        },
            /*
        dispose: function() {
            this._Y = {},
            this.input = typeof this.input == "string" ? n.$(this.input) : this.input,
            this.input && (this._oForm != null && (this._F.action = this._oForm.action, this._F.target = this._oForm.target, this._F.method = this._oForm.method, this._F.onsubmit = this._oForm.onsubmit), n.$dE(this.input, "focus", this._iF), n.$dE(this.input, "blur", this._iF), n.$dE(this.input, "keyup", this._iN), this.autoSubmit && n.$dE(this.input, "keydown", this._iC), n.$dE(this.input, "mouseup", this._iN))
        },*/
        GetShowType: function() {
            return this.type == "" ? "": this.ShowType[this.type]
        },
        inputFocus: function(e) {
            var t = e.type;
            this.input.value == this.text && t.indexOf("focus") >= 0 ? (this.input.value = "", this._U = "", this.Suggest()) : this.input.value == "" && t.indexOf("blur") >= 0 ? (this.input.value = this.text, this._U = "", this.hiddenResults()) : t.indexOf("blur") >= 0 && this.hiddenResults()
    

        },
            
        nGourl: !1,
        Navigate: function(e) {
            var t = this.header == null ? 0 : 1;
            switch (e.keyCode) {
            case 38:
                this.nGourl = !1,
                this.results != null && this.results.innerHTML != "" && this.setLine(this.results.firstChild.rows[!this._W || this._W.rowIndex == t ? this.results.firstChild.rows.length - 2 : this._W.rowIndex - 1]);
                break;
            case 40:
                this.nGourl = !1,
                this.results != null && this.results.innerHTML != "" && this.setLine(this.results.firstChild.rows[!this._W || this._W.rowIndex == this.results.firstChild.rows.length - 2 ? t: this._W.rowIndex + 1]);
                break;
            
            default:
                this.Suggest()
            }
        },
            
        Confirm: function(e) {
             this.Suggest()
        }
                
                ,
        _bd: function(e, t) {
            var n = this;
            return function() {
                var r = null;
                if (typeof t != "undefined") {
                    for (var i = 0; i < arguments.length; i++) t.push(arguments[i]);
                    r = t
                } else r = arguments;
                return e.apply(n, r)
            }
        },
        _gt: function() {
            return (new Date).getTime()
        },
        Suggest: function() {
            var e = this.input.value;
            
            this._U != e ? (this._U = e, e != "" ? "key_" + e in this._Y ? this.Tip() : this._io(e, this._bd(this.Tip), this._bd(this.hiddenResults)) : (this.results != null && this.results.innerHTML != "" && (this._W = null), this.hiddenResults())) : this.setResults()
        },
        setResults: function() {
            this.results != null && (this.results.style.display = "")
        },
        hiddenResults: function() {
            this._hidden == 0 && this.results != null && (this.results.style.display = "none")
        },
        _io: function(e, t, r) {
            this._R == null && (this._R = n.$C("div"), this._R.style.display = "none", document.body.insertBefore(this._R, document.body.lastChild));
            var i = "sData",
            s = n.$C("script");
            s.type = "text/javascript",
            s.charset = "gb2312",
            s.src = this.dataurl.replace("{#NAME}", i).replace("{#KEY}", escape(e)).replace("{#TYPE}", this.GetShowType()).replace("{#RND}", this._gt()),
            s._0j = this,
            t && (s._0k = t),
            r && (s._0l = r),
            s._0m = e,
            s._0n = i,
            s[document.all ? "onreadystatechange": "onload"] = function() {
                if (document.all && this.readyState != "loaded" && this.readyState != "complete") return;
                var e = window[this._0n];
                typeof e != "undefined" && (this._0j._Y["key_" + this._0m] = e, this._0k(e), window[this._0n] = null),
                this._0j = null,
                this._0m = null,
                this._0n = null,
                this[document.all ? "onreadystatechange": "onload"] = null,
                this.parentNode.removeChild(this)
            },
            this._R.appendChild(s)
        },
    

        setColor: function(e) {
            var t = "";
            e._0f && e._0g ? t = "#F8FBDF": e._0f ? t = "#F1F5FC": e._0g && (t = "#FCFEDF"),
            e.style.backgroundColor != t && (e.style.backgroundColor = t)
        },
        setLine: function(e, t) {
            var n = e.id.split(",");
            this._D = n;
            var r = n[1];
            this._U = r,
            this.Market = n[2],
            this.mType = n[5],
            this.SName = n[4],
            this.input.value = "xxx" + r,
            this._W != null && (this._W._0f = !1, this.setColor(this._W)),
            e._0f = !0,
            this.setColor(e),
            this._W = e,
            this.autoSubmit && this.nGourl && this.Submit(t, !1)
        },
        mouseoverLine: function(e) {
            e._0g = !0,
            this.setColor(e)
        },
        mouseoutLine: function(e) {
            e._0g = !1,
            this.setColor(e)
        },
        setLineMouse: function(e) {
            this.nGourl = !0,
            this.setLine(e),
            this.callback != null && this.callback({
                code: this.input.value,
                type: this.Market,
                mt: this.mType,
                cnName: this.SName
            })
        },
        hidepause: function() {
            this._hidden = !0
        },
        hideresume: function() {
            this._hidden = !1,
            this.hiddenResults()
        },
        setTip: function() {
            var e = 0,
            t = 0,
            n = this.input;
            do e += n.offsetTop || 0,
            t += n.offsetLeft || 0,
            n = n.offsetParent;
            while (n);
            var r = [this.input.parentNode.style.borderTopWidth.replace("px", "") * 1, this.input.parentNode.style.borderLeftWidth.replace("px", "") * 1],
            i = [1, 1];
            this.results.style.top != e + "px" && (this.results.style.top = e - r[0] + i[0] + "px"),
            this.results.style.left != t + "px" && (this.results.style.left = t - r[1] + i[1] + "px");
            var s = this.input.style.borderTopWidth,
            o = this.input.style.borderBottomWidth,
            u = this.input.clientHeight;
            u += s != "" ? s.replace("px", "") * 1 : 2,
            u += o != "" ? o.replace("px", "") * 1 : 2,
            this.results.style.marginTop != u + "px" && (this.results.style.marginTop = u + "px")
        },
        Tip: function() {
            var e = this.input.value;
            if ("key_" + e in this._Y && this._Y["key_" + e] != "") {
                this.results == null && (this.results = n.$C("div"), this.results.id = "jj_suggest_result", this.results.style.cssText = "z-index:9999;width:262px;opacity:" + this.opacity + ";filter:alpha(opacity:" + this.opacity * 100 + ");position:absolute;display:none;", this.className == "" ? this.results.style.border = "1px solid #ccc": this.results.className = this.className, this.input.parentNode.insertBefore(this.results, this.input), this.results.suggest = this),
                this.setTip(),
                this.results.innerHTML = "";
                var t = n.$C("table");
                t.border = "0",
                t.cellPadding = "0",
                t.cellSpacing = "0",
                t.style.cssText = "line-height:18px;border:1px solid #FFF;background:#FFF;font-size:12px;text-align:center;color:#666;width:100%;";
                var r = n.$C("tbody"),
                i = n.$C("tr");
                i.style.cssText = "background:#E6F4F5;height:22px;line-height:22px;overflow:hidden;";
                if (this.header != null) for (var s = 0; s < this.header.length; s++) {
                    var o = n.$C("th");
                    this.header[s] == "代码" && (o.width = 60),
                    this.header[s] == "类型" && (o.width = 40),
                    o.innerHTML = this.header[s],
                    i.appendChild(o)
                };
                r.appendChild(i);
                var u = this._Y["key_" + e].replace(/&amp;/g, "&").replace(/;$/, "").split(";"),
                a = u.length > this.max ? this.max: u.length;
                for (var s = 0; s < a; s++) {
                    var f = u[s].split(",");
                    f[ - 1] = f[0].replace(e.toUpperCase(), ‘<span style="color:#F00;">‘ + e.toUpperCase() + "</span>"),
                    f[ - 2] = f[2] in this.StockType ? this.StockType[f[2]] : "--";
                    var l = n.$C("tr");
                    l.id = u[s],
                    l.style.cursor = "pointer",
                    l._oj = this,
                    l.onmouseover = function() {
                        this._oj.mouseoverLine(this)
                    },
                    l.onmouseout = function() {
                        this._oj.mouseoutLine(this)
                    },
                    l.onmousedown = function() {
                        return this._oj.hidepause(this)
                    },
                    l.onclick = function() {
                        this._oj.setLineMouse(this),
                        this._oj.hideresume(this)
                    };
                    var c;
                    for (var h = 0; h < this.body.length; h++) c = n.$C("td"),
                    c.style.wordBreak = "break-all",
                    c.hidefocus = "true",
                    c.style.padding = "1px",
                    c.innerHTML = f[this.body[h]],
                    l.appendChild(c);
                    c = null,
                    r.appendChild(l)
                };

                var p = n.$C("tr");
                p.id = "_AutoSuggest_tip_More_";
                var d = n.$C("td");
                d.colSpan = this.header.length,
                d.align = "right",
                d.hidefocus = "true",
                _more_link = n.$C("a"),
                _more_link.style.cssText = "color:#C00;float:none;clear:both;background:none;border:0;",
                _more_link.href = "http://quote.eastmoney.com/search.html?stockcode=" + escape(e),
                _more_link.target = "_blank",
                _more_link.innerHTML = "更多查询结果&gt;&gt;",
                _more_link._oj = this,
                _more_link.onmousedown = function() {
                    return this._oj.hidepause(this)
                },
                _more_link.onclick = function() {
                    this._oj.hideresume(this)
                },
                //d.appendChild(_more_link),
                p.appendChild(d),
                r.appendChild(p),
                t.appendChild(r),
                this.results.appendChild(t),
                this.setResults()

            } else this.hiddenResults()
        }
    }),
    window.StockSuggest = r
})()

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。