在.js里面怎么实现自动补全

怎么在js里面实现输入的自动补全

解决方案 »

  1.   

    你说的是像google查找东西的那样？？ 那要用到ajax
      

  2.   

    这样可以不？
    L@_@K
    <!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>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
      <input type="text" id="txtInput" />请输入六位编码，形如：000678<br />
      （js 实现不足六位在前自动补0）
     </body>
     <script type="text/javascript">
     <!--
    var oInput = document.getElementById("txtInput");oInput.onblur = function() {
    var maxLen = 6;
    var realLen = this.value.length;
    if (this.value != "" && realLen < maxLen)
    {
    for (var i=0; i<(maxLen - realLen); i++)
    {
    this.value = "0" + this.value;
    }
    }
    };
     //-->
     </script>
    </html>
      

  3.   

    用ajax做的,根据你输入的内容从数据库中提出匹配的数据做成下拉列表,如果只有一个数据就自动补全
      

  4.   

    用Ajax技术把。结合一下jquery结束    或者 html静态的试下<!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="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    body{background:#fff}
    .Menu {
    position:relative;
    width:204px;
    height:127px;
    z-index:1;
    background: #FFF;
    border:1px solid #000;
    margin-top:-100px;
    display:none;
    }
    .Menu2 {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
    overflow:hidden;
    z-index:1;
    }
    .Menu2 ul{margin:0;padding:0}
    .Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
    border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
    change:expression(
    this.onmouseover=function(){
    this.style.background="#F2F5EF";
    },
    this.onmouseout=function(){
    this.style.background="";
    }
    )
    }
    input{width:200px}
    .form{width:200px;height:auto;}
    .form div{position:relative;top:0;left:0;margin-bottom:5px}
    #List1,#List2,#List3{left:0px;top:93px;}
    -->
    </style>
    <script type="text/javascript">
    function showAndHide(obj,types){
    var Layer=window.document.getElementById(obj);
    switch(types){
    case "show":
    Layer.style.display="block";
    break;
    case "hide":
    Layer.style.display="none";
    }
    }
    function getValue(obj,str){
    var input=window.document.getElementById(obj);
    input.value=str;
    }
    </script>
    </head>
    <body>
    <div class="form">
    <div> Location：<input type="text" id="txt" name="txt" onClick="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
    <!--列表1-->
    <div class="Menu" id="List1">
    <div class="Menu2">
    <ul>
    <li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
    <li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
    </ul>
    </div>
    </div>
    <div> Sex：<input type="text" id="txt2" name="txt2" onClick="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>
    <!--列表2-->
    <div class="Menu" id="List2">
    <div class="Menu2">
    <ul>
    <li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
    <li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
    </ul>
    </div>
    </div>
    <div> education：<input type="text" id="txt3" name="txt3" onClick="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>
    <!--列表3-->
    <div class="Menu" id="List3">
    <div class="Menu2">
    <ul>
    <li onmousedown="getValue('txt3','大专');showAndHide('List3','hide');">大专</li>
    <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
    <li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li>
    <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>
      

  5.   

    去看下这帖子吧.  可能对你有点帮助
    http://topic.csdn.net/u/20071112/13/a91471fa-b759-45f4-b19c-249e8fa65c00.html
      

  6.   

    搜索框自动补全(仿百度搜索框)--不使用任何Javascript框架 http://topic.csdn.net/u/20101111/14/1ce6b0a7-f368-47af-b644-d939c9707dc2.html