利用js 进行输入框自动匹配字符的小例子


Posted in Javascript onJune 29, 2013

html

<p><span style="font-size: 18px; ">输入框自动匹配字符~</span></p><p><span style="font-size: 18px; ">但是遇到一个问题~所有匹配的字符要事先写好~大概如果是大型网站的话~应该是利用数据库的记录吧</span></p><p><span style="font-size: 18px; ">看代码</span></p>

html
<style> 
ul,li{margin: 0; padding: 0;width:100%;} 
</style>
<script language="javascript" type="text/javascript"> 
function checkword() 
{ 
   var wordvalue=document.getElementById("word").value.toLowerCase(); 
   var alltxt="all|big|cut|car\|daph8|eeg|egg|eat|fuck|fuck you|fix|good|hand|hidden|ill|jack|jad|kevin|long|man|number|oio|part|pp|quit|QQ|rest|reg|set|submit|time|tag|uuzo|view|windows|want|xy|xun|young|yuyu|z|David|David|哈哈|";//这里就是你所想要匹配的字符,可惜只能用于小型的论坛 
   var alltxtalltxtpp=alltxt.toLowerCase(); 
   var alltxtalltxt_xiang=alltxt.split("|"); 
   var alltxt_xiang1=alltxtpp.split("|"); 
   var inhtml="<ul>" 
   var isyou=0; 
   for (i=0;i<alltxt_xiang1.length;i++) 
   { 
       if (alltxt_xiang1[i].substr(0,wordvalue.length)==wordvalue) 
       { 
           inhtmlinhtml=inhtml+"<li onclick=\"document.getElementById('word').value=this.innerHTML;document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">"+alltxt_xiang[i]+"</li>"; 
           isyou=1; 
       } 
   } 
   inhtmlinhtml=inhtml+"</ul>"; 
   if (isyou==1) 
   { 
       document.getElementById("showmenu").innerHTML=inhtml; 
       document.getElementById("showmenu").style.display=""; 
   } 
   else 
   { 
       document.getElementById("showmenu").innerHTML=""; 
       document.getElementById("showmenu").style.display="none"; 
   } 
   if (wordvalue=="") 
   { 
       document.getElementById("showmenu").innerHTML=""; 
       document.getElementById("showmenu").style.display="none"; 
   } 
} 
</script> 
<input type="text" name="word" size="20" id="word" onkeyup="checkword()" style="border:1px solid #666666;width:200px;height:25px;"> 
<div style="position: absolute; width: 200px; height: 100px; z-index: 1; left: 10px; top: 40px;border:1px solid #666666;display:none;" id="showmenu"></div>
Javascript 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
JS Replace()的高级使用方法介绍
Jun 29 #Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 #Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 #Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 #Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 #Javascript
js操作checkbox遇到的问题解决
Jun 29 #Javascript
JavaScript自执行闭包的小例子
Jun 29 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
js调用后台servlet方法实例
2013/06/09 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
python使用socket连接远程服务器的方法
2015/04/29 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python 全文检索引擎详解
2017/04/25 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python对于requests的封装方法详解
2019/01/03 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
2015年建筑工作总结报告
2015/05/04 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
公司回复函格式
2015/07/14 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
JS中如何优雅的使用async await详解
2021/10/05 Javascript
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA