您的位置：首页 > Web前端 > JavaScript

JS实现自动匹配搜索字符

2010-11-24 14:12 267 查看

JS如下：

var TextUtil = new Object();
var ListUtil = new Object();

ListUtil.remove = function(oListbox,iIndex)
{
oListbox.remove(iIndex);
}

ListUtil.clear = function(oListbox)
{
for(var i = oListbox.options.length -1; i >=0;i--)
{
ListUtil.remove(oListbox,i);
}
}

ListUtil.add = function(oListbox,sName,sValue)
{
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(sName));

if(arguments.length == 3)
{
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption);
}

TextUtil.autosuggestMatch= function (sText,arrValues)
{
var arrResult = new Array;
if(sText !="")
{
for(var i = 0; i < arrValues.length;i++)
{
if(arrValues[i].indexOf(sText) == 0)
{
arrResult.push(arrValues[i]);
}
}
}
return arrResult;
}

TextUtil.autosuggest = function(oTextbox,arrValues,sListboxId)
{
var oListbox = document.getElementById(sListboxId);
ListUtil.clear(oListbox);

var arrMatches = TextUtil.autosuggestMatch(oTextbox.value,arrValues);
for(var i = 0; i < arrMatches.length;i++)
{
ListUtil.add(oListbox,arrMatches[i]);
}

}

HTML如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src=JScript1.js type="text/javascript"></script>
<script type="text/javascript" >
var arrColors = ["red","orange","yellow","green","blue","indigo","violet","brown","black","tan","ovory","navy",
"aqua","white","purple","pink","gray","silver"];
arrColors.sort();

function setText(oListbox,sTextboxId)
{
var oTextbox = document.getElementById(sTextboxId);
if(oListbox.selectedIndex>-1)
{
oTextbox.value = oListbox.options[oListbox.selectedIndex].text;
}
}
</script>
</head>
<body>
<input type ="text" value = "" id="txtColor" onkeyup="TextUtil.autosuggest(this,arrColors,'lstColors')" /><br />
<select id="lstColors" size="5" style="width:200px" onclick="setText(this,'txtColor')"></select>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航