根据输入的值进行动态检索

最新推荐文章于 2024-11-28 09:41:33 发布

原创最新推荐文章于 2024-11-28 09:41:33 发布 · 557 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #function #javascript #button #windows #测试

根据输入的值进行动态检索, Gu Laicheng, 2009.5.16

可以以开始/结束/包含/不包含四种方式进行检索

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="fason,阿信" name=Author>
<title>动态提示的下拉框</title>
<style>
a{color:red;text-decoration:none;font-size:12px}
</style>
</head>
<body onload="Init()">
根据输入的值进行动态检索, Gu Laicheng, 2009.5.16<br/>
可以以开始/结束/包含/不包含四种方式进行检索<br/>
<center>
<h2>动态提示的下拉框</h2>
<hr>
<form name=frm>
<table>
<tr>
    <td>
请输入1或2或3或4或5进行测试：<br/><input name="txt" style="width:100px" onkeyup="SelectTip()">
  <input type="button" value="reset" onclick="Init()"><br/>
以此字串开始<input type="radio" name="sflag" onclick="sflg(0)" checked>
以此字串结束<input type="radio" name="sflag" onclick="sflg(1)">
包含此字串<input type="radio" name="sflag" onclick="sflg(2)">
不包含此字串<input type="radio" name="sflag" onclick="sflg(3)">
</td>
</tr>
<tr>
    <td>
    <span id="demo1">
<select name="demo" style="width:100px" size=10 sFlag=0 onchange="txt.value=options[selectedIndex].text;">
</select>
</span>
    </td>
</tr>
</form>
</table>
<hr>
<script language="javascript">
var SelectOptions=[
["1","1"],
["12","12"],
["123","123"],
["1234","1234"],
["2","2"],
["22","22"],
["223","223"],
["2234","2234"],
["3","3"],
["32","32"],
["323","323"],
["3234","3234"],
["4","4"],
["42","42"],
["423","423"],
["4234","4234"],
["5","5"],
["51","51"],
["51w","51w"],
["51wi","51wi"],
["51win","51win"],
["51wind","51wind"],
["51windowns","51windows"]
];//存贮option

/* 初始化选择框 */
function Init()
{
var TxtObj=document.frm.elements["txt"]
TxtObj.value="";

var SelectObj=document.frm.elements["demo"]
SelectObj.innerText="";
for(i=0;i<SelectOptions.length;i++)
{
  var aElement=document.createElement("OPTION");
  SelectObj.appendChild(aElement);
  aElement.value  = SelectOptions[i][0];
  aElement.innerText = SelectOptions[i][1];
}
}
function sflg(n){
var SelectObj=document.frm.elements["demo"]
SelectObj.sFlag = n;
SelectTip();
}

function SelectTip(){
var TxtObj=document.frm.elements["txt"]
if (TxtObj.value.length==0) return;

var SelectObj=document.frm.elements["demo"]
SelectObj.innerText="";
for(i=0;i<SelectOptions.length;i++)
{
  if (SelectObj.sFlag==0 && SelectOptions[i][1].indexOf(TxtObj.value)!=0) continue; //以此字串开始;
  if (SelectObj.sFlag==1 && (SelectOptions[i][1].length < TxtObj.value.length || SelectOptions[i][1].indexOf(TxtObj.value)!=(SelectOptions[i][1].length-TxtObj.value.length))) continue; //以此字串结束;
  if (SelectObj.sFlag==2 && SelectOptions[i][1].indexOf(TxtObj.value)==-1) continue; //包含此字串;
  if (SelectObj.sFlag==3 && SelectOptions[i][1].indexOf(TxtObj.value)!=-1) continue; //不包含此字串;
  var aElement=document.createElement("OPTION");
  SelectObj.appendChild(aElement);
  aElement.value  = SelectOptions[i][0];
  aElement.innerText = SelectOptions[i][1];
}

}
</script>
</body>