求教类似IE地址栏的输入提示功能解决办法
日期：2014-05-18 浏览次数：20973 次
求教类似IE地址栏的输入提示功能
请问各位达人 如何实现类似IE地址栏的输入的提示功能
------解决方案--------------------
<html>
<head>
<title> tips </title>
<script>
function getText(li)
{
document.getElementsByName( "dddd ")[0].value=li.innerText;
document.getElementById( "tips ").style.display= "none ";
}
function catch_keydown()
{
}
function catch_up(inp)
{
var inn=inp.value;
if(inn== " ")
{
document.getElementById( "tips ").style.display= "none ";
return;
}
var list=document.getElementById( "options ").children;
var ts=new Array(list.length);
for(var i=0;i <list.length;i++)
{
if(list[i].innerText.indexOf(inn)==0)
ts[i]=list[i].innerText;
}
var html= " <ul> ";
for(var i=0;i <ts.length;i++)
{
if(ts[i]!=undefined)
html=html+ " <li onclick= 'getText(this); '> "+ts[i]+ " </li> ";
}
html=html+ " </ul> ";
document.getElementById( "tips ").innerHTML=html;
document.getElementById( "tips ").style.display= "block ";
}
</script>
</head>
<body>
<p>
<input id= "val " name= "dddd " type= "text " onkeyup= "catch_up(this); "/>
</p>
<p>
<div id= "tips " style= "display: none;position: absolute; background-color: red; color: blue; "> </div>
</p>
</ul>
<ul id= "options ">
<li onclick= "getText(this); "> 两语法能 </li>
<li onclick= "getText(this); "> 两的了解 </li>
<li onclick= "getText(this); "> 机动力分解 </li>
<li onclick= "getText(this); "> 接诶昂 </li>
</ul>
</body>
</html>
你看看，就是这样的思路
请问各位达人 如何实现类似IE地址栏的输入的提示功能
------解决方案--------------------
<html>
<head>
<title> tips </title>
<script>
function getText(li)
{
document.getElementsByName( "dddd ")[0].value=li.innerText;
document.getElementById( "tips ").style.display= "none ";
}
function catch_keydown()
{
}
function catch_up(inp)
{
var inn=inp.value;
if(inn== " ")
{
document.getElementById( "tips ").style.display= "none ";
return;
}
var list=document.getElementById( "options ").children;
var ts=new Array(list.length);
for(var i=0;i <list.length;i++)
{
if(list[i].innerText.indexOf(inn)==0)
ts[i]=list[i].innerText;
}
var html= " <ul> ";
for(var i=0;i <ts.length;i++)
{
if(ts[i]!=undefined)
html=html+ " <li onclick= 'getText(this); '> "+ts[i]+ " </li> ";
}
html=html+ " </ul> ";
document.getElementById( "tips ").innerHTML=html;
document.getElementById( "tips ").style.display= "block ";
}
</script>
</head>
<body>
<p>
<input id= "val " name= "dddd " type= "text " onkeyup= "catch_up(this); "/>
</p>
<p>
<div id= "tips " style= "display: none;position: absolute; background-color: red; color: blue; "> </div>
</p>
</ul>
<ul id= "options ">
<li onclick= "getText(this); "> 两语法能 </li>
<li onclick= "getText(this); "> 两的了解 </li>
<li onclick= "getText(this); "> 机动力分解 </li>
<li onclick= "getText(this); "> 接诶昂 </li>
</ul>
</body>
</html>
你看看，就是这样的思路
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
