在手机上实现搜索框 + 多列下拉列表
浏览数：27 /
时间：2015年06月11日
最近在做这个功能，但又不想用太大的框架，怕手机上慢，于是参考了一下东方财富的手机版，做个记号（以下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(/&/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 = "更多查询结果>>", _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 })()
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
