简单JS自动提示文本框代码
2023-06-13 09:14:32 时间
本例以颜色为例,为用户提供自动提示,展示效果和运行结果如图:
复制代码代码如下:
<body>
<formmethod="post"name="myForm1">
Color:<inputtype="text"name="colors"id="colors"onkeyup="findColors();"/>
</form>
<divid="popup">
<ulid="colors_ul"></ul>
</div>
</body>
2、页面和表单CSS:
<style>
<!--
body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;padding:0px;margin:5px;form{padding:0px;margin:0px;}
input{font-family:Arial,Helvetica,sans-serif;
font-size:12px;border:1pxsolid#000000;
width:200px;padding:1px;margin:0px;#popup{position:absolute;width:202px;
color:#004a7e;font-size:12px;
font-family:Arial,Helvetica,sans-serif;
left:41px;top:25px;#popup.show{border:1pxsolid#004a7e;#popup.hide{border:none;
}ul{
list-style:none;
margin:0px;padding:0px;li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;-->
</style>
3、实现JS匹配用户输入:
<scriptlanguage="javascript">
varoInputField;//考虑到很多函数中都要使用
varoPopDiv;//因此采用全局变量的形式
varoColorsUl;
varaColors=["red","green","blue","magenta","yellow",……"ivory","darkmagenta","cornfloewrblue"];
aColors.sort();//按字母排序,使显示结果更友好
functioninitVars(){oInputField=document.forms["myForm1"].colors;
oPopDiv=document.getElementByIdx_x("popup");
oColorsUl=document.getElementByIdx_x("colors_ul");functionclearColors(){for(vari=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className="hide";functionsetColors(the_colors){clearColors();//每输入一个字母就先清除原先的提示,再继续
oPopDiv.className="show";
varoLi;
for(vari=0;i<the_colors.length;i++){oLi=document.createElement_x("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.=function(){
this.className="mouseOver";//鼠标经过时高亮oLi.=function(){
this.className="mouseOut";//离开时恢复原样oLi.onclick=function(){oInputField.value=this.firstChild.nodeValue;
clearColors();//同时清除提示框}functionfindColors(){
initVars();//初始化变量
if(oInputField.value.length>0){
varaResult=newArray();//用于存放匹配结果
for(vari=0;i<aColors.length;i++)//从颜色表中找匹配的颜色if(aColors[i].indexOf(oInputField.value)==0)
aResult.push(aColors[i]);//压入结果
if(aResult.length>0)//如果有匹配的颜色则显示出来
setColors(aResult);
else//否则清除,用户多输入一个字母
clearColors();//就有可能从有匹配到无,到无的时候需要清除else
clearColors();//无输入时清除提示框(例如用户按del键)
</script>
文本框输入提示/自动完成的Js代码
文本框输入自动匹配或提示的功能,输入内容,自动匹配对应数据,可用上下键控制选项、按回车键选择,也可以直接用鼠标选择。代码:建立实例,第一个参数是实例对象的名称,第二个是最多显示的数量。
相关文章
- js书写原生ajax,JS 原生ajax写法
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- JS设置定时器_js设置定时器
- 页面显示载入中,请稍候… 自动跳转到的JS代码详解编程语言
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- 从前端JS里请求Redis资源,搭建高性能应用(前端js请求redis)
- Oracle中使用JS变量管理数据(oracle使用js变量)
- 用js自动判断浏览器分辨率的代码
- 又一个图片自动缩小的JS代码
- 兼容ie、firefox的图片自动缩放的css跟js代码分享
- js中parseFloat(参数1,参数2)定义和用法及注意事项
- 输入数量和价格自动计算输出金额的js代码
- js实现杯子倒水问题自动求解程序
- js图片自动切换效果处理代码
- Js日期选择器并自动加入到输入框中示例代码
- 兼容ie、firefox的图片自动缩放的css跟js代码分享
- js自动查找select下拉的菜单并选择(示例代码)