利用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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
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生成4位数字验证码的实现代码
2015/11/23 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python rstrip()方法实例详解
2018/11/11 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
golang/python实现归并排序实例代码
2020/08/30 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
汽车驾驶求职信
2013/10/25 职场文书
研究生导师推荐信
2014/09/06 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
公司股份合作协议书
2014/12/07 职场文书
离婚律师函范本
2015/05/27 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书