开发编程 JavaScript

仿基金查询输入框下拉筛选值效果(JavaScript)

2010-08-28 10:52:45来源：西部e网作者：

　　最早看到这个效果的是在google.cn上面，当在输入框中输入文字时，就会出现下拉筛选值的效果。现在很多基金网站也适用了这个效果，查询起来十分方便，究竟是怎么样实现的呢？在ASP.NET中的TextBox的AutoCompleteMode和AutoCompleteSource属性可以实现类似效果。现在用单纯的JavaScript来实现，icech扒了一个网站的程序直接给大家演示一下：

文件有：
input_shai.html 显示HTML文件
Suggest.css CSS样式表文件
SuggestData.js 数据储存文件
Suggest.js JS功能文件
SmartUILib.js JS功能文件

效果如下：

input_shai.html源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link href="Suggest.css" rel="stylesheet" type="text/css" /> <title>仿基金查询输入框下拉筛选值效果</title> <script type="text/javascript" src="SmartUILib.js"></script> <script type="text/javascript" src="Suggest.js"></script> </head> <body> <input type="text" onfocus="this.value='';" id="TextFundIndex" width: 50;" /> <div id="popupContainer"></div> <div id="stockEditorContainer"></div> <div id="loaderScriptContainer"></div> <script language="JavaScript"> var suggestUrl = "SuggestData.js"; var suggestAttend = new Suggest(suggestUrl); suggestAttend.bind(document.getElementById("TextFundIndex")); </script> </body> </html>

Suggest.css CSS代码：

.suggest { position: absolute; background-color: #FFFFFF; border: 1px solid #A5ACB2; border-top: none; font-size:9pt; } .suggest .tableSuggest { color: #999999; line-height: 16px; margin-top: 2px; width: 100%; } .suggest .tableSuggest td { text-align: center; padding: 2px 4px; } .suggest .trHeader { background-color: #F3F3F3; } .suggest .overLine { background-color: #F1F5FC; color: #333333; cursor: pointer; } .suggest .selectedLine { background-color: #F6F8FD; color: #444444; } .suggest .overSelectedLine { background-color: #EFF3FB; color: #000000; cursor: pointer; }

SmartUILib.js代码：

function getElement(id) { return document.getElementById(id); } function createElement(type) { return document.createElement(type); } function removeElement(element) { try { if (element) { element.parentNode.removeChild(element); } } catch (e) { } } function hideElement(element) { if (element) { element.style.display = "none"; } } function hideElementV(element) { if (element) { element.style.visibility = "hidden"; element.style.display = ""; } } function showElement(element) { if (element) { element.style.display = ""; element.style.visibility = ""; } } function clearElement(element) { for (var i in element) { try { element[i] = null; } catch (e) { continue; } } } function getWindowSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } return([myWidth,myHeight]); } function GetOffsetPos(element) { var flag = element.tagName.toUpperCase() == "INPUT" ? true : false; var posTop = 0, posLeft = 0; do { posTop += element.offsetTop || 0; posLeft += element.offsetLeft || 0; element = element.offsetParent; } while (element); return [posLeft, posTop]; } function hideSelects(zIndexNow) { if (navigator.appVersion.indexOf("MSIE 6.0") != -1) { var selects = document.getElementsByTagName("select"); var length = selects.length; for (var i = 0; i < length; i++) { if (selects[i].zIndexNow != zIndexNow && selects[i].style.visibility != "hidden") { selects[i].style.visibility = "hidden"; selects[i].zIndexNow = zIndexNow; } } } } function showSelects(zIndexNow) { if (navigator.appVersion.indexOf("MSIE 6.0") != -1) { var selects = document.getElementsByTagName("select"); var length = selects.length; for (var i = 0; i < length; i++) { if (selects[i].zIndexNow == zIndexNow) { selects[i].style.visibility = ""; selects[i].zIndexNow = -1; } } } } var LoaderScript = function () { this.elementContainer = null; this.init = function (stringContainerId) { if (stringContainerId) { this.elementContainer = document.getElementById(stringContainerId); } else { this.elementContainer = document.createElement("div"); this.elementContainer.style.display = "none"; document.body.appendChild(this.elementContainer); } }; this.load = function (src, callback, valueCallback) { var elementLoader = document.createElement("script"); elementLoader.type = "text/javascript"; elementLoader.language = "javascript"; elementLoader.charset = "gb2312"; elementLoader.src = src; elementLoader.valueCallback = valueCallback; elementLoader[document.all ? "onreadystatechange" : "onload"] = this.unload; elementLoader.callback = callback; this.elementContainer.appendChild(elementLoader); }; this.unload = function () { if (document.all) { if (this.readyState != "loaded" && this.readyState != "complete") { return; } } if (this.callback) { this.callback(this.valueCallback); } this.callback = null; this[document.all ? "onreadystatechange" : "onload"] = null; this.parentNode.removeChild(this); }; }; var LoaderAjax = function () { this.createXMLHttpObject = function () { try { return new XMLHttpRequest(); } catch (e) { } try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { } try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { } return null; }; this.load = function (url, callback, content) { var xmlhttp = this.createXMLHttpObject(); if (xmlhttp != null) { xmlhttp.open("post", url, true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-Type","text/xml"); xmlhttp.setRequestHeader("Content-Type","gb2312"); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var text = xmlhttp.responseText; xmlhttp.abort(); xmlhttp = null; callback(text); } } }; content = content == undefined ? null : content; xmlhttp.send(content); } }; }; var Model = function (stringType, stringContainerId) { this.getRandomString = function () { var date = new Date(); return date.getTime(); }; this.stringType = stringType.toLowerCase(); this.responseText = null; this.booleanReturnForced = false; switch (this.stringType) { case "ajax": this.loader = new LoaderAjax(); break; case "script": this.loader = new LoaderScript(); this.loader.init(stringContainerId); break; } this.stringUrl = ""; this.stringMark = "@RANDOM@"; this.callback = function (responseText) { var model = arguments.callee.model; switch (model.stringType) { case "ajax": if ((model.responseText != responseText || model.booleanReturnForced) && responseText != "") { model.responseText = responseText; model.processData.model = model; model.processData(responseText); model.updateView(); } break; case "script": model.processData(responseText); model.updateView(responseText); break; } }; this.callback.model = this; this.processData = function () {}; this.updateView = function () {}; this.stringContent = null; this.intThread = -1; this.intInterval = 5000; this.start = function () { this.stop(); this.load(); this.intThread = setInterval(this.load, this.intInterval); }; this.stop = function () { if (this.intThread != -1) { clearInterval(this.intThread); } this.intThread = -1; }; this.arrayUrl = []; this.loadScriptUrl = function () { var model = arguments.callee.model; if (model.arrayUrl.length > 0) { var stringUrl = model.arrayUrl.shift(); model.loader.load(stringUrl.replace(model.stringMark, model.getRandomString()), model.callback, stringUrl); } }; this.loadScriptUrl.model = this; this.load = function () { var model = arguments.callee.model; switch (model.stringType) { case "ajax": model.loader.load(model.stringUrl.replace(model.stringMark, model.getRandomString()), model.callback, model.stringContent); break; case "script": if (model.stringUrl.constructor == Array) { model.arrayUrl = []; for (var i = 0; i < model.stringUrl.length; i++) { model.arrayUrl.push(model.stringUrl[i]); setTimeout(model.loadScriptUrl, i * 5000); } } else if (model.stringUrl != "") { model.loader.load(model.stringUrl.replace(model.stringMark, model.getRandomString()), model.callback, model.stringUrl); } break; } }; this.load.model = this; }; var DragAble = function (dragable,handler) { this.iDiffX = 0; this.iDiffY = 0; this.oDragable = dragable; this.oHandler = handler; this.mouseDown = function(){ document.body.onselectstart = function () {return false;}; document.body.style.userSelect = "none"; document.body.style.MozUserSelect = "none"; var object = arguments.callee.object; var event = arguments[0] || window.event; object.iDiffX = event.clientX - object.oDragable.offsetLeft; object.iDiffY = event.clientY - object.oDragable.offsetTop; document.body.onmousemove = object.mouseMove; document.body.onmouseup = object.mouseUp; object.oHandler.style.cursor = "move"; }; this.mouseDown.object = this; this.oHandler.onmousedown = this.mouseDown; this.mouseMove = function() { var object = arguments.callee.object; var event = arguments[0] || window.event; var wWidth = getWindowSize()[0]; if ((event.clientX - object.iDiffX) >= 0 && (event.clientX - object.iDiffX + object.oDragable.clientWidth) <= wWidth - 20){ object.oDragable.style.left = event.clientX - object.iDiffX + "px"; } else { if ((event.clientX - object.iDiffX) < 0){ object.oDragable.style.left = 0 + "px"; } else { object.oDragable.style.left = wWidth - object.oDragable.clientWidth - 20 + "px"; } } //obj.style.left = tempLeft + "px"; if ((event.clientY - object.iDiffY) >= 0){ object.oDragable.style.top = event.clientY - object.iDiffY + "px"; } else { object.oDragable.style.top = 0 + "px"; } }; this.mouseMove.object = this; this.mouseUp = function() { var object = arguments.callee.object; document.body.onselectstart = ""; document.body.style.userSelect = ""; document.body.style.MozUserSelect = ""; document.body.onmousemove = ""; document.body.onmouseup = ""; object.oHandler.style.cursor = ""; }; this.mouseUp.object = this; };

Suggest.js源代码：

var Suggest = function (stringUrl) { this.stringKeySpliter = ":" this.stringRecordSpliter = "|"; this.stringSystemKeys = "s,sh,sz,0,1,2,3,4,5,6,7,8,9"; this.arraySystemKeys = new Array(); this.arrayPrepareKeys = new Array(); this.intPrepareKeysMaxLength = 50; this.stringData = new String(); this.getNearestData = function (stringKey) { if (this.arrayPrepareKeys.length == 0) { return new String(); } var arrayContainers = new Array(); for (var i =0; i < this.arraySystemKeys.length; i++) { if (this.arraySystemKeys[i][0] == stringKey) { return this.arraySystemKeys[i][1]; } if (stringKey.match(new RegExp("^" + this.arraySystemKeys[i][0], "igm")) != null) { arrayContainers.push(this.arraySystemKeys[i]); } } for (var i = 0; i < this.arrayPrepareKeys.length; i++) { if (this.arrayPrepareKeys[i][0] == stringKey) { return this.arrayPrepareKeys[i][1]; } if (stringKey.match(new RegExp("^" + this.arrayPrepareKeys[i][0], "igm")) != null) { arrayContainers.push(this.arrayPrepareKeys[i]); } } if (arrayContainers.length == 0) { return new String(); } else { arrayContainers.sort( function (arrayA, arrayB) { return arrayB[0].length - arrayA[0].length; } ); return arrayContainers[0][1]; } }; this.getResult = function (stringData, stringKey) { var stringRegExpSystem = "$()*+.[?\^{|"; var stringKeySpliter = (stringRegExpSystem.indexOf(this.stringKeySpliter) < 0 ? "" : "\\") + this.stringKeySpliter; var stringRecordSpliter = (stringRegExpSystem.indexOf(this.stringRecordSpliter) < 0 ? "" : "\\") + this.stringRecordSpliter; var arrayMatchResult = stringData.match(new RegExp("" + stringRecordSpliter + (isNaN(parseInt(stringKey)) ? "" : "(s[hz])?") + stringKey + "[^\\" + stringRecordSpliter + "|" + stringKeySpliter + "]*" + stringKeySpliter + "[^\\" + stringRecordSpliter + "|" + stringKeySpliter + "|\n]*", "igm")); return arrayMatchResult == null ? new Array() : arrayMatchResult; }; this.getQuickResult = function (stringKey) { stringKey = stringKey.split(this.stringKeySpliter).join("").split(this.stringRecordSpliter).join(""); if (stringKey == "") { return new Array(); } var stringNearestData = this.getNearestData(stringKey); var arrayResult = stringNearestData == "" ? this.getResult(this.stringData, stringKey) : this.getResult(stringNearestData, stringKey); arrayResult = arrayResult == null ? new Array() : arrayResult; var booleanIsInSystemKeys = false; for (var i = 0; i < this.arraySystemKeys.length; i++) { if (this.arraySystemKeys[i][0] == stringKey) { booleanIsInSystemKeys = true; break; } } var booleanIsInPrepareKeys = false; for (var i = 0; i < this.arrayPrepareKeys.length; i++) { if (this.arrayPrepareKeys[i][0] == stringKey) { booleanIsInPrepareKeys = true; break; } } if (!booleanIsInSystemKeys && !booleanIsInPrepareKeys) { this.arrayPrepareKeys.push(new Array(stringKey, arrayResult.join(""))); if (this.arrayPrepareKeys.length > this.intPrepareKeysMaxLength) { this.arrayPrepareKeys.sort( function (arrayA, arrayB) { return arrayA[0].length - arrayB[0].length; } ); this.arrayPrepareKeys.pop(); } } return arrayResult; }; this.load = function (stringKey) { if (stringKey.indexOf(",") != -1 && stringKey.indexOf(",") != 0 && stringKey.indexOf(",") != stringKey.length - 1) { var arrayStringKey = stringKey.split(","); stringKey = arrayStringKey[arrayStringKey.length - 1]; } if (stringKey.indexOf("\\") != -1) { return new Array(); } var stringRegExpSystem = "$()*+.[?^{|"; for (var i = 0; i < stringRegExpSystem.length; i++) { if (stringKey.indexOf(stringRegExpSystem.substr(i, 1)) != -1) { return new Array(); } } var stringMarket = new String(); var arrayQuickResult = this.getQuickResult(stringKey); arrayQuickResult.length = arrayQuickResult.length > 10 ? 10 : arrayQuickResult.length; return arrayQuickResult; }; this.show = function () { var element = arguments.callee.element; if (!element.booleanScan) { return; } if (element.stringLastValue != element.value && element.value != "代码/名称/拼音") { element.line = null; element.stringLastValue = element.value; var arrayResult = element.suggest.load(element.value); if (arrayResult.length > 0) { element.divHint.style.display = "block"; var arrayPosition = GetOffsetPos(element); element.divHint.style.left = arrayPosition[0] + "px"; element.divHint.style.top = arrayPosition[1] + "px"; element.divHint.style.marginTop = element.clientHeight + 1 + "px"; element.divHint.style.width = (element.clientWidth < 200 ? 200 : element.clientWidth) + "px"; var tableContainer = document.createElement("table"); tableContainer.className = "tableSuggest"; tableContainer.cellPadding = 0; tableContainer.cellSpacing = 0; var trHeader = tableContainer.insertRow(0); trHeader.className = "trHeader"; var tdKey = trHeader.insertCell(0); tdKey.innerHTML = "选项"; var tdCode = trHeader.insertCell(1); tdCode.innerHTML = "代码"; var tdName = trHeader.insertCell(2); tdName.innerHTML = "名称"; for (var i = 0; i < arrayResult.length; i++) { if (isNaN(parseInt(i))) { continue; }; var arrayRecord = arrayResult[i].replace("|", "").split(":"); var arrayCodeAndName = arrayRecord[1].split("-"); var trRecord = tableContainer.insertRow(parseInt(i) + 1); var tdKey = trRecord.insertCell(0); tdKey.innerHTML = arrayRecord[0]; var tdCode = trRecord.insertCell(1); //~ tdCode.innerHTML = arrayCodeAndName[0] + arrayCodeAndName[1]; tdCode.innerHTML = arrayCodeAndName[1]; var tdName = trRecord.insertCell(2); tdName.innerHTML = arrayCodeAndName[2]; //~ trRecord.stringFullCode = arrayCodeAndName[0] + arrayCodeAndName[1]; trRecord.stringFullCode = arrayCodeAndName[1]; trRecord.stringFullName = arrayCodeAndName[2]; trRecord.stringCodeAndName = arrayCodeAndName[2] + "(" + arrayCodeAndName[1] + ")"; trRecord.inputTarget = element; trRecord.onmouseover = function () { this.inputTarget.overLine = this; this.className = this.inputTarget.line == this ? "overSelectedLine" : "overLine"; }; trRecord.onmouseout = function () { this.inputTarget.overLine = null; this.className = this.inputTarget.line == this ? "selectedLine" : ""; }; trRecord.onmousedown = function () { this.inputTarget.booleanScan = true; this.inputTarget.setLine(this); }; } element.divHint.innerHTML = ""; element.divHint.appendChild(tableContainer); element.tableHint = tableContainer; } else { element.divHint.style.display = "none"; element.divHint.innerHTML = ""; element.tableHint = null; } } }; this.bind = function (element) { element.suggest = this; element.show = this.show; element.show.element = element; element.intThread = -1; element.arrayData = new Array(); element.value = "代码/名称/拼音"; element.style.color = "#999999"; element.booleanScan = true; element.autocomplete = "off"; var divDataTable = document.createElement("div"); divDataTable.style.display = "none"; element.parentNode.insertBefore(divDataTable, element); element.divHint = divDataTable; element.tableHint = null; element.line = null; element.overLine = null; divDataTable.className = "suggest"; element.onfocus = function () { if (this.value == "代码/名称/拼音") { this.value = ""; this.code = ""; this.style.color = ""; }; this.stringLastValue = this.value; if (this.divHint.innerHTML != "") { this.divHint.style.display = "block"; var arrayPosition = GetOffsetPos(this); this.divHint.style.left = arrayPosition[0] + "px"; this.divHint.style.top = arrayPosition[1] + "px"; this.divHint.style.marginTop = this.clientHeight + 1 + "px"; this.divHint.style.width = (this.clientWidth < 200 ? 200 : this.clientWidth) + "px"; } this.select(); this.intThread = setInterval(this.show, 10); }; element.onblur = function () { if (this.value == "") { this.value = "代码/名称/拼音"; this.style.color = "#999999"; }; this.divHint.style.display = "none"; clearInterval(this.intThread); this.intThread = -1; }; element.setLine = function (line) { var stringKeyFore = ""; if (this.value.indexOf(",") != -1 && this.value.indexOf(",") != 0 && this.value.indexOf(",") != this.value.length - 1) { var arrayStringKeyFore = this.value.split(","); arrayStringKeyFore[arrayStringKeyFore.length - 1] = ""; stringKeyFore = arrayStringKeyFore.join(","); } if (this.line != null) { this.line.className = this.overLine == this.line ? "overLine" : ""; } this.line = line; line.className = this.overLine == line ? "overSelectedLine" : "selectedLine"; this.value = line.stringCodeAndName; this.code = line.stringFullCode; }; element.onkeydown = function () { if (!this.tableHint) { return true; } var stringKeyFore = ""; if (this.value.indexOf(",") != -1 && this.value.indexOf(",") != 0 && this.value.indexOf(",") != this.value.length - 1) { var arrayStringKeyFore = this.value.split(","); arrayStringKeyFore[arrayStringKeyFore.length - 1] = ""; stringKeyFore = arrayStringKeyFore.join(","); } var event = arguments[0] || window.event; switch (event.keyCode) { case 38: //up this.booleanScan = false; if (this.line == null || this.line.rowIndex == 1) { this.setLine(this.tableHint.rows[this.tableHint.rows.length - 1]); } else { this.setLine(this.tableHint.rows[this.line.rowIndex - 1]); } return false; break; case 40: //down this.booleanScan = false; if (this.line == null || this.line.rowIndex == this.tableHint.rows.length - 1) { this.setLine(this.tableHint.rows[1]); } else { this.setLine(this.tableHint.rows[this.line.rowIndex + 1]); } return false; break; case 13: //Enter this.booleanScan = true; this.stringLastValue = stringKeyFore + this.value; this.divHint.style.display = "none"; break; default: this.booleanScan = true; break; } }; }; var model = new Model("script", "loaderScriptContainer"); model.suggest = this; this.model = model; model.stringUrl = stringUrl ? stringUrl : "suggest.js"; model.processData = function () { var suggest = this.suggest; suggest.stringData = suggest.stringRecordSpliter + window["SuggestData"]; var arrayStringSystemKeys = suggest.stringSystemKeys.split(","); for (var i =0; i < arrayStringSystemKeys.length; i++) { var stringNearestData = suggest.getNearestData(arrayStringSystemKeys[i]); var arrayResult = stringNearestData == "" ? suggest.getResult(suggest.stringData, arrayStringSystemKeys[i]) : suggest.getResult(stringNearestData, arrayStringSystemKeys[i]); arrayResult = arrayResult == null ? new Array() : arrayResult; suggest.arraySystemKeys.push(new Array(arrayStringSystemKeys[i], arrayResult.join(""))); } }; model.load(); };

SuggestData.js代码（部分数据）：

window.SuggestData="184706:CLOSEsz-184706-基金天华|基金天华:CLOSEsz-184706-基金天华|jjth:CLOSEsz-184706-基金天华|184692:CLOSEsz-184692-基金裕隆|基金裕隆:CLOSEsz-184692-基金裕隆|jjyl:CLOSEsz-184692-基金裕隆|184691:CLOSEsz-184691-基金景宏|基金景宏:CLOSEsz-184691-基金景宏|jjjh:CLOSEsz-184691-基金景宏|184690:CLOSEsz-184690-基金同益|基金同益:CLOSEsz-184690-基金同益|jjty:CLOSEsz-184690-基金同益|000031:CLOSEsh-000031-华夏复兴|华夏复兴:CLOSEsh-000031-华夏复兴|hxfx:CLOSEsh-000031-华夏复兴|000020:CLOSEsh-000020-<a href="http://www.weste.net/" target="_blank" class="keylink">西部e网</a>|<a href="http://www.weste.net/" target="_blank" class="keylink">西部e网</a>:CLOSEsh-000020-西部e网|weste:CLOSEsh-weste.net-西部e网|000022:CLOSEsh-000022-西部<a href="http://www.weste.net/zh-cn/elec/" target="_blank" class="keylink">家电</a>网|weste:CLOSEsh-weste.cn-西部<a href="http://www.weste.net/zh-cn/elec/" target="_blank" class="keylink">家电</a>网|";

声明：转载请注明来源于西部e网(weste.net)。

关键词：Javascript

相关阅读:

推荐文章

最新文章

网站简介 | 版权声明 | 联系我们 | 在线投稿 | 友情链接 | 广告服务 | RSS订阅 | 网站地图 |
Copyright © 2000-2018 威易网 WWW.WESTE.NET. All rights reserved. 陕ICP备19016059号