{"id":2291,"date":"2017-05-13T13:21:36","date_gmt":"2017-05-13T05:21:36","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2291"},"modified":"2017-05-13T13:21:36","modified_gmt":"2017-05-13T05:21:36","slug":"%e6%a8%a1%e6%8b%9f%e7%99%be%e5%ba%a6%e8%be%93%e5%85%a5%e6%a1%86%e7%9a%84%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2291","title":{"rendered":"\u6a21\u62df\u767e\u5ea6\u8f93\u5165\u6846\u7684\u6548\u679c"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head lang=\"en\">\r\n    <meta charset=\"UTF-8\">\r\n    <title>\u767e\u5ea6\u641c\u7d22\u6846<\/title>\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        #box {\r\n            width: 400px;\r\n            margin: 200px auto;\r\n            \/*border: 1px solid #000;*\/\r\n        }\r\n\r\n        #txtSearch {\r\n            width: 300px;\r\n        }\r\n\r\n        #pop {\r\n            width: 300px;\r\n            border: 1px solid red;\r\n            padding: 0px;\r\n        }\r\n\r\n        #pop ul {\r\n            list-style-type: none;\r\n            margin: 5px;\r\n            padding: 0px;\r\n        }\r\n\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"box\">\r\n    <input type=\"text\" value=\"\" id=\"txtSearch\"\/>\r\n    <input type=\"button\" value=\"\u641c\u7d22\" id=\"btnSearch\"\/>\r\n    <!--<div id=\"pop\">\r\n        <ul>\r\n            <li>a<\/li>\r\n            <li>ab<\/li>\r\n            <li>abc<\/li>\r\n            <li>abcd<\/li>\r\n            <li>abcde<\/li>\r\n            <li>amm<\/li>\r\n        <\/ul>-\r\n    <\/div>-->\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<script>\r\n\r\n\/\/\u4e0e\u83b7\u53d6\u6587\u672c\u6216\u662f\u8bbe\u7f6e\u6587\u672c\u76f8\u5173\u7684\u5bf9\u8c61\r\nvar Txt = {\r\n    getText: function (ele) {\r\n        if (typeof ele.innerText == \"string\") {\r\n            return ele.innerText;\/\/\u5c06\u83b7\u53d6\u7684\u6587\u672c\u5185\u5bb9\u8fd4\u56de\r\n        } else {\r\n            return ele.textContent;\r\n        }\r\n    },\r\n    setText: function (ele, value) {\r\n        \/\/ \u80fd\u529b\u68c0\u6d4b\uff1a\u5c31\u662f\u8981\u770b\u5f53\u524d\u7684\u6d4f\u89c8\u5668\u662f\u5426\u652f\u6301\u6b64\u5bf9\u8c61\u7684\u5c5e\u6027\u6216\u662f\u65b9\u6cd5\r\n        if (typeof ele.innerText == \"string\") {\r\n            ele.innerText = value;\r\n        } else { \/\/ textContent\r\n            ele.textContent = value;\r\n        }\r\n    }\r\n}\r\n\r\n    \/\/ \u5f53\u6211\u4eec\u5728\u8f93\u5165\u6846\u4e2d\u952e\u76d8\u6309\u4e0b\uff0c\u5e76\u62ac\u8d77\u7684\u65f6\u5019\uff0c\u5c31\u4f1a\u5411\u670d\u52a1\u5668\u53d1\u9001\u4e00\u6761ajax\u8bf7\u6c42,\u53bb\u670d\u52a1\u5668\u7684\r\n    \/\/\u6570\u636e\u5e93\u4e2d\u67e5\u8be2\u4ee5\u7528\u6237\u8f93\u5165\u7684\u5185\u5bb9\u4e3a\u5f00\u5934\u7684\u6570\u636e\uff0c\u5982\u679c\u627e\u5230\u4e86\uff0c\u5219\u5c06\u8fd9\u4e9b\u6570\u636e\u8fd4\u56de\u7ed9\u6d4f\u89c8\u5668\uff0c\u6e32\u67d3\u5230\u6307\u5b9a\u7684\u4f4d\u7f6e\r\n\r\n    \/\/ \u7528\u672c\u5730\u6570\u7ec4\u6a21\u62df\u4e00\u4e0b\u6570\u636e\u5e93\r\n    var strs =[\"a\",\"ab\",\"abc\",\"abcd\",\"abcde\",\"acc\",\"amm\",\"mmm\",\"kkk\"];\r\n\r\n    \/\/ 1. \u952e\u76d8\u6309\u4e0b\u5e76\u62ac\u8d77\u7684\u65f6\u5019\uff0c\u83b7\u5f97\u7528\u6237\u8f93\u5165\u7684\u6570\u636e\r\n    \/\/ 2. \u62ff\u7740\u7528\u6237\u8f93\u5165\u7684\u6570\u636e\uff0c\u53bb\u6570\u636e\u5e93\u641c\u7d22\u4ee5\u7528\u6237\u8f93\u5165\u7684\u5185\u5bb9\u4e3a\u5f00\u5934\u7684\u6570\u636e\r\n    \/\/ 3. \u627e\u5230\u4ee5\u7528\u6237\u8f93\u5165\u7684\u5185\u5bb9\u4e3a\u5f00\u5934\u7684\u6570\u636e\uff0c\u5b58\u5165\u65b0\u7684\u5bb9\u5668\u4e2d\r\n    \/\/ 4. \u6839\u636e\u5339\u914d\u5230\u7684\u6570\u636e(\u6839\u636e\u65b0\u6570\u7ec4\u7684\u957f\u5ea6\uff0c\u6765\u52a8\u6001\u7684\u751f\u6210\u5217\u8868\u4e2d\u7684li)\uff0c\u52a8\u6001\u7684\u751f\u6210\u5217\u8868\r\n    \/\/ 5. \u5224\u65ad\u7279\u6b8a\u60c5\u51b5\r\n\r\n    var txtSearch=document.getElementById('txtSearch');\r\n    var box=document.getElementById('box');\r\n\r\n    txtSearch.onkeyup=function(){\r\n        var value=txtSearch.value;\r\n\r\n\/\/       \u8fc7\u6ee4\r\n        var filter=[];\r\n        for(var i=0;i<strs.length;i++){\r\n            if(strs[i].indexOf(value)==0){\r\n                filter.push(strs[i]);\r\n            }\r\n        }\r\n\/\/        \u5224\u65ad\u6709\u6ca1\u6709pop\u76d2\u5b50\uff0c\u6709\u5c31\u5148\u6e05\u9664\u6389\uff0c\u518d\u521b\u5efa\r\n        var pop=document.getElementById('pop');\r\n        if(pop){\r\n            box.removeChild(pop);\r\n        }\r\n        if(!filter.length){\r\n            return;\r\n        }\r\n        if(!value){\r\n            return;\r\n        }\r\n\r\n\/\/        \u52a8\u6001\u521b\u5efa\r\n        pop=document.createElement('div');\r\n        pop.setAttribute('id','pop');\r\n        var ul=document.createElement('ul');\r\n        pop.appendChild(ul);\r\n        box.appendChild(pop);\r\n\r\n\/\/        \u52a8\u6001\u521b\u5efali\r\n        for(var j=0;j<filter.length;j++){\r\n            var li=document.createElement('li');\r\n            Txt.setText(li,filter[j]);\r\n            ul.appendChild(li);\r\n\r\n            li.onmouseover=function(){\r\n                this.style.backgroundColor='#c0c0c0';\r\n            }\r\n            li.onmouseout=function(){\r\n                this.style.backgroundColor='#fff';\r\n            }\r\n            li.onclick=function(){\r\n                txtSearch.value=Txt.getText(this);\r\n                this.parentNode.parentNode.style.display='none';\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n<\/script><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u6a21\u62df\u767e\u5ea6\u8f93\u5165\u6846\u7684\u6548\u679c<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,316,315],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2291"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2291"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2291\/revisions"}],"predecessor-version":[{"id":2292,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2291\/revisions\/2292"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2291"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}