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

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>

赞 (0)

相关推荐

  • JS实现仿百度输入框自动匹配功能的示例代码

    现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东. 复制代码 代码如下: <HTML><HEAD><title>带输入匹配的文本框</title><style>body,div {font-family:verdana;line-height:100%;font-size:10pt;}input {width:

  • JSuggest自动匹配下拉框使用方法(示例代码)

    1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 复制代码 代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;

  • js 获取中文拼音,Select自动匹配字母获取值的代码

    复制代码 代码如下: <script type="text/javascript"> var key2code = {65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j", 75:"

  • 基于javascript实现仿百度输入框自动匹配功能

    本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd

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

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

  • js实现rem自动匹配计算font-size的示例

    实际开发过程中,我们经常会被各种宽度,高度计算搞晕.尤其是使用了rem的计算方式,自适应布局难倒一大片程序员.为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值. 下面是相关JavaScript的实现代码: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' :

  • C#实现ComboBox自动匹配字符

    1. 采用CustomSource当做提示集合 将下列代码添加到窗口加载函数中即可.假设unitNameList是获取的想要添加到下拉列表中的字符串列表. 复制代码 代码如下: AutoCompleteStringCollection collection = new AutoCompleteStringCollection(); // 获取单位列表 List<string> unitNameList = this.getAllUnitName(); foreach (string unitn

  • 扩展JS Date对象时间格式化功能的小例子

    在自己JS代码中引入一下代码: 复制代码 代码如下: Date.prototype.format =function(format){    var o = {            "M+" : this.getMonth()+1, //month            "d+" : this.getDate(), //day            "h+" : this.getHours(), //hour            "

  • .net,js捕捉文本框回车键事件的小例子(兼容多浏览器)

    js: 复制代码 代码如下: function bubufx_enterpress(e) {         var keynum; if (window.event) // IE           {             keynum = e.keyCode; }         else if (e.which) // Netscape/Firefox/Opera           {             keynum = e.which;         }         i

  • 将DLL放入到资源中,运行时自动加载的小例子

    将DLL放入到资源中,运行时自动加载的小例子

    今天在看到 一个小软件,考勤用的 AttendanceSheet_V_1_2,只有一个EXE文件,绿色的随便考到哪里都可以运行. 顺手反编译后发现,他将需要的DLL也放入到资源文件了,在启动的时候自动加载: 代码如下: 复制代码 代码如下: internal static class Program{    // Methods    [STAThread]    private static void Main()    {        Application.EnableVisualSty

  • js动态创建表格,删除行列的小例子

    复制代码 代码如下: <!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/xhtml"><head><meta http-equiv="

  • JS在textarea光标处插入文本的小例子

    下面是代码: 复制代码 代码如下: --------------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x

随机推荐