仿淘宝上的拼音索引，，，，自动弹出新层问T，，，，

他用XMLHTTP组件向服务器发送用户输入的文本，服务器根据用户输入文本返回下拉数据。

解决方案 »

  1.   


    <!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>
    <script language="javascript">
    var docEle = function() {
          return document.getElementById(arguments[0]) || false;
        }
    function openNewDiv(_id) {
    var m = "mask";
    if (docEle(_id)) document.removeChild(docEle(_id));
    if (docEle(m)) document.removeChild(docEle(m));
    // 新激活图层
    var newDiv = document.createElement("div");
    newDiv.id = _id;
    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "9999";
    newDiv.style.width = "500px";
    newDiv.style.height = "90px";
    newDiv.style.top = "50px";
    //newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
    newDiv.style.background = "#EFEFEF";
    newDiv.style.border = "1px solid #860001";
    newDiv.style.padding = "5px";
    newDiv.innerHTML = "<a href='#'>bbbbbb</a><a href='#'>aaaaaa</a>  <a href='#'>aaaaaa</a> <a href='#'>aaaaaa</a>";
    document.body.appendChild(newDiv);
    // mask图层
    var newMask = document.createElement("div");
    newMask.id = m;
    newMask.style.position = "absolute";
    newMask.style.zIndex = "1";
    newMask.style.width = document.body.scrollWidth + "px";
    newMask.style.height = document.body.scrollHeight + "px";
    newMask.style.top = "0px";
    newMask.style.left = "0px";
    //newMask.style.background = "#000";
    newMask.style.filter = "alpha(opacity=40)";
    newMask.style.opacity = "0.40";
    document.body.appendChild(newMask);
    // 关闭mask和新图层
    var newA = document.createElement("a");
    newA.href = "#";
    newA.innerHTML = "关闭";
    newA.onmouseover = function() {
      document.body.removeChild(docEle(_id));
      document.body.removeChild(docEle(m));
      return false;
    }
    newDiv.appendChild(newA);
    }
    </script> </head>
    <body>
    <a href="#" onmouseover="openNewDiv('newDiv');return false;" onmouseout="">激活新层</a>
    </body>
    </html>我找了一个，，，，，，
      

  2.   

    我是把a---z的内容生成js文件，放在缓存里了，，，，，引入js文件，再用JS来显示，，，，，
    可惜我在JS上比较白一些，，，，，
      

  3.   

    囧。
     GOOGLE搜索那个也一样嘛。
    AJAX  与服务器交互  弹出DIV
      

  4.   

    solution 1: Ajax + 后台XML
    solution 2: Ajax + 后台DB
      

  5.   

    不是找解决方案，，，，，这种方式用AJAX，有点牺牲数据库性能，因为这个分类的东西基本不会变得太多，所以把a---z的内容从数据库定期取出生成js文件（以JS数组形式），放在缓存里了，，，，，在页面调用时引入js数组文件，再用JS来显示，，，，，
    avon,,,,对我来说的难点，，，个人不会的地方，，，当鼠标离开时，这个函数有错误，，，请指教，，，，
    function closeDiv(){
        document.body.removeChild(docEle(_id));
        return false;
    }

    源代码，，，，<!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>
    <script language="javascript">
    var docEle = function() {
          return document.getElementById(arguments[0]) || false;
        }
    function openNewDiv(_id) {
    var m = "mask";
    if (docEle(_id)) document.removeChild(docEle(_id));
    if (docEle(m)) document.removeChild(docEle(m));
    // 新激活图层
    var newDiv = document.createElement("div");
    newDiv.id = _id;
    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "9999";
    newDiv.style.width = "500px";
    newDiv.style.height = "90px";
    newDiv.style.top = "50px";
    //newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
    newDiv.style.background = "#EFEFEF";
    newDiv.style.border = "1px solid #860001";
    newDiv.style.padding = "5px";
    newDiv.innerHTML = "<a href='#'>bbbbbb</a><a href='#'>aaaaaa</a>  <a href='#'>aaaaaa</a> <a href='#'>aaaaaa</a>";
    document.body.appendChild(newDiv);
    }
    function closeDiv(){
        document.body.removeChild(docEle(_id));
        return false;
    }
    </script>
    </head>
    <body>
    <a href="#" onmouseover="openNewDiv('newDiv');return false;" onmouseout="closeDiv()">激活新层</a>
    </body>
    </html>