auto complete输入框 自动提示

最新推荐文章于 2025-08-13 21:05:35 发布
原创 最新推荐文章于 2025-08-13 21:05:35 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#autocomplete #function #div #javascript #border #object

本文介绍了一个模仿IE浏览器自动完成功能的JavaScript实现方案。该方案通过创建自定义的JavaScript类来实现输入框的自动补全功能，并展示了如何通过实例化该类并添加建议项来实现基本的自动补全逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<HTML>   
<HEAD>   
 
<title>模仿IE自动完成功能，读取输入框存取记录</title>   
<mce:style><!--  
   
body,div {   
       font-family:verdana;   
       line-height:100%;   
       font-size:9pt;   
}   
input {   
       width:300px;   
}   
h1 {   
       text-align:center;   
       font-size:2.2em;   
}   
#divf {   
       margin:10px;   
       font-size:0.8em;   
       text-align:center;   
}   
#divc {   
       border:1px solid #333333;   
}   
.des {   
       width:500px;   
       background-color:lightyellow;   
       border:1px solid #333;   
       padding:20px;   
       margin-top:20px;   
}   
.mouseover {   
       color:#ffffff;   
       background-color:highlight;   
       width:100%;   
       cursor:default;   
}   
.mouseout {   
       color:#000000;   
       width:100%;   
       background-color:#ffffff;   
       cursor:default;   
}   
--></mce:style><style mce_bogus="1">   
body,div {   
       font-family:verdana;   
       line-height:100%;   
       font-size:9pt;   
}   
input {   
       width:300px;   
}   
h1 {   
       text-align:center;   
       font-size:2.2em;   
}   
#divf {   
       margin:10px;   
       font-size:0.8em;   
       text-align:center;   
}   
#divc {   
       border:1px solid #333333;   
}   
.des {   
       width:500px;   
       background-color:lightyellow;   
       border:1px solid #333;   
       padding:20px;   
       margin-top:20px;   
}   
.mouseover {   
       color:#ffffff;   
       background-color:highlight;   
       width:100%;   
       cursor:default;   
}   
.mouseout {   
       color:#000000;   
       width:100%;   
       background-color:#ffffff;   
       cursor:default;   
} </style>   
<SCRIPT LANGUAGE="JavaScript">   
<!--   
 
// script by blueDestiny   
// email : blueDestiny [at] 126 . com   
 
// Object: jsAuto   
// browser: ie, mf.   
// example:   
 
// step1 :    
// create autocomplete container, return object and bind event to the object, and    
///create a new jsAuto instance:   
// <div id="divautocomplete"></div>   
// var autocomplete = new jsAuto("autocomplete","divautocomplete")   
// handle event:   
// autocomplete.handleEvent(value, returnObjectID)   
// <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)>   
 
// step2 :   
// add autocompete item:   
// autocomplete.item(string)   
// string must be a string var, you can split the string by ","   
// autocomplete.item("blueDestiny,never-online,csdn,blueidea")   
 
// http://www.never-online.com   
 
function jsAuto(instanceName,objID)   
{   
       this._msg = [];   
       this._x = null;   
       this._o = document.getElementById( objID );   
       if (!this._o) return;   
       this._f = null;   
       this._i = instanceName;   
       this._r = null;   
       this._c = 0;   
       this._s = false;   
       this._v = null;   
       this._o.style.visibility = "hidden";   
       this._o.style.position = "absolute";   
       this._o.style.zIndex = "9999";   
this._o.style.overflow = "auto";   
this._o.style.height = "50";   
       return this;   
};   
 
jsAuto.prototype.directionKey=function() { with (this)   
{   
       var e = _e.keyCode ? _e.keyCode : _e.which;   
       var l = _o.childNodes.length;   
       (_c>l-1 || _c<0) ? _s=false : "";   
 
       if( e==40 && _s )   
       {   
              _o.childNodes[_c].className="mouseout";   
              (_c >= l-1) ? _c=0 : _c ++;   
              _o.childNodes[_c].className="mouseover";   
       }   
       if( e==38 && _s )   
       {   
              _o.childNodes[_c].className="mouseout";   
              _c--<=0 ? _c = _o.childNodes.length-1 : "";   
              _o.childNodes[_c].className="mouseover";   
       }   
       if( e==13 )   
       {   
              if(_o.childNodes[_c] && _o.style.visibility=="visible")   
              {   
                     _r.value = _x[_c];   
                     _o.style.visibility = "hidden";   
              }   
       }   
 
       if( !_s )   
       {   
              _c = 0;   
              _o.childNodes[_c].className="mouseover";   
              _s = true;   
       }   
}};   
 
// mouseEvent.   
jsAuto.prototype.domouseover=function(obj) { with (this)   
{   
       _o.childNodes[_c].className = "mouseout";   
       _c = 0;   
       obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";   
}};   
jsAuto.prototype.domouseout=function(obj)   
{   
       obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";   
};   
jsAuto.prototype.doclick=function(msg) { with (this)   
{   
       if(_r)   
       {   
              _r.value = msg;   
              _o.style.visibility = "hidden";   
       }   
       else   
       {   
              alert("javascript autocomplete ERROR :nn can not get return object.");   
              return;   
       }   
}};   
 
// object method;   
jsAuto.prototype.item=function(msg)   
{   
       if( msg.indexOf(",")>0 )   
       {   
              var arrMsg=msg.split(",");   
              for(var i=0; i<arrMsg.length; i++)   
              {   
                     arrMsg[i] ? this._msg.push(arrMsg[i]) : "";   
              }   
       }   
       else   
       {   
              this._msg.push(msg);   
       }   
       this._msg.sort();   
};   
jsAuto.prototype.append=function(msg) { with (this)   
{   
       _i ? "" : _i = eval(_i);   
       _x.push(msg);   
       var div = document.createElement("DIV");   
 
       //bind event to object.   
       div.onmouseover = function(){_i.domouseover(this)};   
       div.onmouseout = function(){_i.domouseout(this)};   
       div.onclick = function(){_i.doclick(msg)};   
       var re  = new RegExp("(" + _v + ")","i");   
       div.style.lineHeight="140%";   
       div.className = "mouseout";   
       if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");   
       div.style.fontFamily = "verdana";   
 
       _o.appendChild(div);   
}};   
jsAuto.prototype.display=function() { with(this)   
{   
       if(_f&&_v!="")   
       {   
              _o.style.left = _r.offsetLeft;   
              _o.style.width = _r.offsetWidth;   
              _o.style.top = _r.offsetTop + _r.offsetHeight;   
              _o.style.visibility = "visible";   
       }   
       else   
       {   
              _o.style.visibility="hidden";   
       }   
}};   
jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this)   
{   
       var re;   
       _e = event;   
       var e = _e.keyCode ? _e.keyCode : _e.which;   
       _x = [];   
       _f = false;   
       _r = document.getElementById( fID );   
       _v = fValue;   
       _i = eval(_i);   
       re = new RegExp("^" + fValue + "", "i");   
       _o.innerHTML="";   
 
       for(var i=0; i<_msg.length; i++)   
       {   
              if(re.test(_msg[i]))   
              {   
                     _i.append(_msg[i]);   
                     _f = true;   
              }   
       }   
 
       _i ? _i.display() : alert("can not get instance");   
 
       if(_f)   
       {   
              if((e==38 || e==40 || e==13))   
              {   
                     _i.directionKey();   
              }   
              else   
              {   
                     _c=0;   
                     _o.childNodes[_c].className = "mouseover";   
                     _s=true;   
              }   
       }   
}};   
window.onerror=new Function("return true;");   
//-->   
</SCRIPT>   
</HEAD>   
 
<BODY>   
<div id="divc">   
       <!--this is the autocomplete container.-->   
</div>   
<h1>Autocomplete Function</h1>   
<div align="center">   
<input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto">   
</div>   
<div id="divf">   
       Power By Miracle, never-online   
</div>   
 
<SCRIPT LANGUAGE="JavaScript">   
<!--   
var jsAutoInstance = new jsAuto("jsAutoInstance","divc");   
jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");   
jsAutoInstance.item("blueDestiny");   
jsAutoInstance.item("BlueMiracle,Blue");   
jsAutoInstance.item("angela,geniuslau");   
jsAutoInstance.item("never-online");   
//-->   
</SCRIPT>   
<center>请随便输入一个字母看看 -_-</center>   
</BODY>   
</HTML> 

autocomplete 实现输入自动提示
meijory的博客
09-02 8105
jquery.autocomplete详解  AutoComplete控件是在文本框输入内容时能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户，供用户选择。 根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。 autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autoc
js 实现 输入框自动完成功能
03-30
js 实现 输入框自动完成功能! 值得下载看看!资源免费,大家分享!!
模仿IE自动完成功能，读取输入框存取记录
weixin_33901641的博客
09-21 145
&lt;HTML&gt; &lt;HEAD&gt; &lt;title&gt;网页特效---模仿IE自动完成功能，读取输入框存取记录&lt;/title&gt; &lt;style&gt; body,div {  font-family:verdana;  line-height:100%;  font-size:9pt; } input {  width:300px; } ...
输入框自动完成功能
天道酬勤
08-05 356
Codetrinis Test Test1: Test2
文本框输入实现自动完成功能autocomplete
阿赛
02-11 977
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l...
文本框输入提示/自动完成功能
qq_35309973的博客
12-17 729
文本框输入提示/自动完成功能 效果如下图： 代码如下： <!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/xhtm...
Android编程实现输入框动态自动提示功能
08-31
"Android编程实现输入框动态自动提示功能" Android编程实现输入框动态自动提示功能是Android开发中常见的需求之一。AutoCompleteTextView是Android提供的控件之一，可以实现输入框动态自动提示功能。在实际开发中，...
输入框自动提示demo
11-29
在Android开发中，"输入框自动提示demo"是一种常见的用户界面功能，主要用于提高用户体验和交互效率。这个功能通常涉及到`AutoCompleteTextView`组件，它是一个可扩展的`EditText`，能够在用户输入时提供下拉菜单，...
Android输入框自动提示进阶
10-26
`Android输入框自动提示进阶`这个主题聚焦于提升用户体验，通过使用`AutoCompleteTextView`来实现输入框的智能提示功能。`AutoCompleteTextView`是Android SDK提供的一种控件，它允许在用户输入时显示匹配的建议列表...
Android输入框自动提示
10-26
本篇将详细介绍如何在Android中实现输入框自动提示，主要涉及`AutoCompleteTextView`组件。 `AutoCompleteTextView`是Android SDK中的一个视图类，它是`EditText`的一个扩展，用于提供自动完成的功能。它可以根据...
实现类似Google的输入框自动提示功能
使用基于jQuery的自制控件可以方便地为页面中的特定输入框添加自动提示功能。此外，自制控件可针对特定场景进行优化，使得自动完成功能更加贴合实际需要。通过演示文档，开发者可以直观地了解和测试该控件的工作机制...
自动补全（可模糊搜索）的输入框
08-01
利用javascript实现类似于百度，谷歌搜索的自动模糊搜索补全提示的功能，代码中已有详细的注释信息，可以实现鼠标点击，上下方向键浏览点击，enter确认等常用功能，可移植性不错。（修正版）
vue-auto-complete-Vue2的自动完成。 适用于对象或api调用。-Vue.js开发
05-27
vuejs-auto-complete Vue自动完成组件npm install vuejs-auto-complete --save使用安装，将自动完成组件添加到您的应用程序中vuejs-auto-complete Vue自动完成组件npm install vuejs-auto-complete --save使用安装，将自动完成组件添加到您的应用中从'vue'导入Vue从'vuejs-auto-complete'导入自动完成new Vue（{// ... components：{Autocomplete，}，// ...}）Api数据源 对象数据源
ajax实时查库，实现输入框的自动完成提示框功能
rockfall的专栏
01-25 837
html：                                       输入项                                                                                               js： function show_list(url) {
js输入框邮箱自动提示功能代码实现
12-11 927
一个输入框当我输入任何字的时候自动下拉相应的邮箱提示，在输入框输入11的时候下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱,下面实现这个自动提示功能 同理 此插件不需要任何html标签，只需要一个输入框 有相对应的class类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的。 HTML代码如下：  代码如下:    
webstorm auto complete for html:
openglnewbee的博客
02-28 660
比如View,按下tab，即可自动补完（这里是rn的jsx语法，和html类似）
element autocomplete
czh4869623的专栏
02-14 377
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.15.0/lib/index.js"></script> <div id="app"> <el-autocomplete class="inline-input" v-model="selectedItem.value" .
自动补全组件 —— `<auto-complete>`
gitblog_00040的博客
05-09 588
自动补全组件 —— <auto-complete> 在网页开发中，为用户提供快速便捷的搜索建议是提升用户体验的关键之一。这就是为什么我们向您推荐一个名为 <auto-complete> 的强大开源项目。这个自定义元素使您可以轻松地从服务器获取并显示搜索结果，为您的用户创建智能且响应式的输入体验。 项目介绍 <auto-complete> 是一款轻量级的 Web ...
element-ui autocomplete 组件源码分享
qq_37309987的博客
03-28 3029
紧接着 input 组件的源码，分享带输入建议的 autocomplete 组件，在 element-ui 官方文档上，没有这个组件的 api 目录，它的 api 是和 input 组件的 api 在一起的，看完源码之后发现，源码当中 autocomplete 组件是一个单独的组件，进而在此做单独的简单分享。主要从以下五个方面来分享。2.17 highlight-first-item 属性，是否默认突出显示远程搜索建议中的第一项，类型 boolean，默认 false。
electron进程间通信- 从渲染进程到主进程
最新发布
唐璜Taro的博客
08-13 1118
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值