大家好，对JavaScript 基金查询输入框下拉筛选值的简单示例感兴趣的小伙伴，下面一起跟随三零脚本的小编来看看JavaScript 基金查询输入框下拉筛选值的简单示例的例子吧。
文件有：
input_shai.html 显示HTML文件
Suggest.css CSS样式表文件
SuggestData.js 数据储存文件
Suggest.js JS功能文件
SmartUILib.js JS功能文件
当在输入框中输入文字时，就会出现下拉筛选值的效果。现在很多基金网站也适用了这个效果，查询起来十分方便，究竟是怎么样实现的呢？现在用单纯的JavaScript来实现，
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-华夏复兴";