js 仿google搜索

   具体应用场景:
          var info = "<div id=\"showMessageTableDiv\" style=\"overflow:auto;height:330px\" width='750px'>";
              info +="<table>";
              info += "<tr> ";
       info += "<td><input type=\"text\" id=\"checkLisenceCode\" value='' class=\"txt1 border1\" style=\"position: absolute;left: 60px; top: 45px;padding-left:1px;width:200px;\"     onkeyup =\"test()\" /></td>";
       info += "</tr>";
              info += "<tr>";
              info += "<td>";
              info += "<div  id=\"showmenu\"  style=\"position: absolute; width: 200px; height: 100px; z-index: 1; left: 60px; top: 65px;border:1px solid #666666; display:none;\"></div>";
              info += "</td>";
              info +=" </tr>"
              info += "</table>";
             info +="</div>";

function test()
{
           //这儿待搜索的内容写死了
            var wordvalue = document.getElementById("checkLisenceCode").value.toLowerCase();
            var alltxt="管理员|apple苹果|all全|big大|bad坏|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.cn|uuzo|view|windows|want|xy|xun|young|yuyu|zoo|Zzz|锋.David|David|哈哈|www.uuzo.cn|www.uuzo.com";
    //可以输入"管"字看看效果
            var alltxtpp=alltxt.toLowerCase();
            var alltxt_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)
               {
                   inhtml = inhtml + "<li onclick=\"document.getElementById('checkLisenceCode').value=this.innerHTML;document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">" + alltxt_xiang[i] + "</li>";
                   isyou=1;
               }
            }
            inhtml=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";
            }


}

有需要的可以给我留言,下次我会把完整的源码贴上来

参考资料:http://blog.csdn.net/lai_gb/archive/2009/07/04/4322270.aspx
非常感谢这位同学的资料.
posted @ 2009-09-23 15:00  艾伦  阅读(743)  评论(0编辑  收藏  举报