{"id":90,"date":"2025-11-22T09:49:39","date_gmt":"2025-11-22T01:49:39","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=90"},"modified":"2025-11-22T09:49:39","modified_gmt":"2025-11-22T01:49:39","slug":"html5-%e6%90%9c%e7%b4%a2%e6%a1%86search-box%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/22\/html5-%e6%90%9c%e7%b4%a2%e6%a1%86search-box%e8%af%a6%e8%a7%a3\/","title":{"rendered":"HTML5 \u641c\u7d22\u6846Search Box\u8be6\u89e3"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd HTML5 \u641c\u7d22\u6846\uff08Search Box\uff09\u6700\u5168\u8be6\u89e3<\/strong>\uff1a\u5305\u542b\u8bed\u6cd5\u3001\u5c5e\u6027\u3001\u4e8b\u4ef6\u3001\u79fb\u52a8\u7aef\u7279\u6027\u3001\u81ea\u52a8\u5b8c\u6210\u3001\u6837\u5f0f\u7f8e\u5316\u3001\u5e38\u89c1\u9519\u8bef\u3001\u5b8c\u6574\u793a\u4f8b\u7b49\uff0c\u4e00\u6b21\u641e\u61c2\u641c\u7d22\u6846\u7684\u6240\u6709\u5b9e\u6218\u7528\u6cd5\uff01<\/p>\n\n\n\n

\n\n\n\n

\ud83d\udd0d \u4e00\u3001HTML5 \u641c\u7d22\u6846\u662f\u4ec0\u4e48\uff1f<\/strong><\/h1>\n\n\n\n

HTML5 \u63d0\u4f9b\u4e13\u95e8\u7528\u4e8e\u641c\u7d22\u7684\u8f93\u5165\u6846\u7c7b\u578b\uff1a<\/p>\n\n\n

\n&lt;input type="search">\n\n<\/pre><\/div>\n\n\n
\u5b83\u4e0e text<\/code> \u7c7b\u578b\u7c7b\u4f3c\uff0c\u4f46\u9488\u5bf9\u201c\u641c\u7d22\u201d\u573a\u666f\u505a\u4e86\u4f18\u5316\uff0c\u5c24\u5176\u662f\u5728 \u79fb\u52a8\u7aef\u6d4f\u89c8\u5668<\/strong> \u4e0a\u8868\u73b0\u66f4\u597d\u3002<\/p>\n\n\n\n
\n\n\n\n
\ud83e\udde9 \u4e8c\u3001\u57fa\u672c\u7528\u6cd5<\/strong><\/h1>\n\n\n
\n&lt;input type="search" placeholder="\u641c\u7d22\u5185\u5bb9...">\n\n<\/pre><\/div>\n\n\n
\u7279\u70b9\uff1a<\/p>\n\n\n\n
    \n
  • \u81ea\u5e26\u641c\u7d22\u8bed\u4e49\uff08\u5bf9 SEO \u548c\u65e0\u969c\u788d\u53cb\u597d\uff09<\/li>\n\n\n\n
  • \u79fb\u52a8\u7aef\u4f1a\u663e\u793a\u5e26\u201c\u641c\u7d22\u201d\u6216\u201c\u524d\u5f80\u201d\u7684\u952e\u76d8<\/li>\n\n\n\n
  • \u90e8\u5206\u6d4f\u89c8\u5668\u53f3\u4fa7\u9ed8\u8ba4\u663e\u793a\u6e05\u7a7a\u6309\u94ae\uff08\u00d7\uff09<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    \u2699\ufe0f \u4e09\u3001\u652f\u6301\u7684 HTML5 \u5c5e\u6027\u8be6\u89e3<\/strong><\/h1>\n\n\n\n
    \u5c5e\u6027\u540d<\/th>\u8bf4\u660e<\/th>\u793a\u4f8b<\/th><\/tr><\/thead>
    placeholder<\/code><\/td>\u641c\u7d22\u6846\u63d0\u793a\u6587\u5b57<\/td><input placeholder=\"\u8bf7\u8f93\u5165\u5173\u952e\u8bcd\"><\/code><\/td><\/tr>
    autocomplete<\/code><\/td>\u81ea\u52a8\u8865\u5168 on\/off<\/td>autocomplete=\"off\"<\/code><\/td><\/tr>
    autofocus<\/code><\/td>\u9875\u9762\u52a0\u8f7d\u81ea\u52a8\u805a\u7126<\/td>autofocus<\/code><\/td><\/tr>
    value<\/code><\/td>\u9ed8\u8ba4\u641c\u7d22\u5185\u5bb9<\/td>value=\"\u624b\u673a\"<\/code><\/td><\/tr>
    required<\/code><\/td>\u4e0d\u80fd\u4e3a\u7a7a<\/td>required<\/code><\/td><\/tr>
    maxlength<\/code><\/td>\u6700\u5927\u5b57\u6570\u9650\u5236<\/td>maxlength=\"20\"<\/code><\/td><\/tr>
    pattern<\/code><\/td>\u6b63\u5219\u9a8c\u8bc1<\/td>pattern=\"[A-Za-z]+\"<\/code><\/td><\/tr>
    name<\/code><\/td>\u63d0\u4ea4\u6570\u636e\u5b57\u6bb5\u540d<\/td>name=\"keyword\"<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u793a\u4f8b\uff1a<\/p>\n\n\n
    \n&lt;input type="search" name="q" placeholder="\u641c\u7d22" required autocomplete="off">\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udd25 \u56db\u3001\u5e38\u7528\u4e8b\u4ef6\uff08Search \u4e13\u7528 + Input \u901a\u7528\uff09<\/strong><\/h1>\n\n\n\n
    \u4e8b\u4ef6<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
    input<\/code><\/td>\u8f93\u5165\u8fc7\u7a0b\u4e2d\u5b9e\u65f6\u89e6\u53d1\uff08\u7528\u4e8e\u641c\u7d22\u5efa\u8bae\uff09<\/td><\/tr>
    change<\/code><\/td>\u8f93\u5165\u5b8c\u6210\u540e\u6539\u53d8<\/td><\/tr>
    search<\/code><\/td>\u7528\u6237\u70b9\u51fb\u641c\u7d22\u6309\u94ae\u6216\u6e05\u9664\u6309\u94ae\u65f6\u89e6\u53d1<\/td><\/tr>
    focus<\/code> \/ blur<\/code><\/td>\u805a\u7126 \/ \u5931\u7126<\/td><\/tr>
    keydown<\/code><\/td>\u6309\u952e\u4e8b\u4ef6\uff08\u76d1\u542c Enter\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u76d1\u542c\u641c\u7d22\u4e8b\u4ef6\uff1a<\/p>\n\n\n
    \ndocument.getElementById("search").addEventListener("search", function () {\n    console.log("\u7528\u6237\u63d0\u4ea4\u6216\u6e05\u9664\u4e86\u641c\u7d22");\n});\n\n<\/pre><\/div>\n\n\n
    \u76d1\u542c\u56de\u8f66\u952e\uff1a<\/p>\n\n\n
    \nsearchInput.addEventListener("keydown", e => {\n    if (e.key === "Enter") {\n        console.log("\u6309\u4e0b\u56de\u8f66\uff1a\u6267\u884c\u641c\u7d22\u903b\u8f91");\n    }\n});\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83c\udfaf \u4e94\u3001\u641c\u7d22\u6846\u7684 CSS \u7f8e\u5316<\/strong><\/h1>\n\n\n\n
    \u9ed8\u8ba4\u6837\u5f0f\u6bd4\u8f83\u6734\u7d20\uff0c\u901a\u5e38\u9700\u8981\u81ea\u5b9a\u4e49\u3002<\/p>\n\n\n\n
    \u2714 \u5706\u89d2\u641c\u7d22\u6846<\/h3>\n\n\n
    \n.search-box {\n    width: 100%;\n    padding: 10px 15px;\n    border-radius: 25px;\n    border: 1px solid #ccc;\n    font-size: 16px;\n}\n\n<\/pre><\/div>\n\n
    \n&lt;input type="search" class="search-box" placeholder="\u641c\u7d22\u5185\u5bb9">\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 \u5e26\u56fe\u6807\u7684\u641c\u7d22\u6846<\/h3>\n\n\n
    \n&lt;div class="search-container">\n    &lt;span class="icon">\ud83d\udd0d&lt;\/span>\n    &lt;input type="search" id="search" placeholder="\u641c\u7d22\u5185\u5bb9\u2026">\n&lt;\/div>\n\n<\/pre><\/div>\n\n
    \n.search-container {\n    position: relative;\n    width: 100%;\n}\n.search-container .icon {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n}\n.search-container input {\n    width: 100%;\n    padding: 10px 40px;\n    border-radius: 22px;\n    border: 1px solid #ccc;\n}\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 \u53bb\u6389 Safari \u9ed8\u8ba4\u6e05\u9664\u6309\u94ae ( \u00d7 )<\/h3>\n\n\n
    \ninput[type="search"]::-webkit-search-cancel-button {\n    display: none;\n}\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udce1 \u516d\u3001\u8f93\u5165\u641c\u7d22\u5efa\u8bae\uff08\u8054\u60f3\u8bcd\uff09\u5b9e\u73b0\u65b9\u5f0f<\/strong><\/h1>\n\n\n\n
    1. \u9759\u6001\u5efa\u8bae\u5217\u8868<\/h3>\n\n\n
    \n&lt;input id="search" type="search" list="suggest">\n&lt;datalist id="suggest">\n    &lt;option value="iPhone">\n    &lt;option value="\u5c0f\u7c73\u624b\u673a">\n    &lt;option value="\u534e\u4e3a">\n&lt;\/datalist>\n\n<\/pre><\/div>\n\n\n
    \u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5f39\u51fa\u5efa\u8bae\u3002<\/p>\n\n\n\n
    \n\n\n\n
    2. \u52a8\u6001 Ajax \u641c\u7d22\u5efa\u8bae\uff08\u5e38\u7528\u4e8e\u7535\u5546\uff09<\/h3>\n\n\n
    \nsearchInput.addEventListener("input", function () {\n    fetch("\/api\/search?kw=" + this.value)\n        .then(res => res.json())\n        .then(list => {\n            suggestionBox.innerHTML = list.map(v => `&lt;div>${v}&lt;\/div>`).join("");\n        });\n});\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udcf1 \u4e03\u3001\u79fb\u52a8\u7aef\u641c\u7d22\u6846\u4f18\u5316<\/strong><\/h1>\n\n\n\n
    \u573a\u666f<\/th>\u65b9\u6cd5<\/th><\/tr><\/thead>
    \u8c03\u6574\u952e\u76d8\u4e3a\u201c\u641c\u7d22\u201d\u6309\u94ae<\/td>input type=\"search\"<\/code> \u81ea\u52a8\u652f\u6301<\/td><\/tr>
    iOS \u5fae\u8c03<\/td>-webkit-appearance: none;<\/code><\/td><\/tr>
    \u81ea\u52a8\u7126\u70b9<\/td>autofocus<\/code><\/td><\/tr>
    \u81ea\u52a8\u5173\u95ed\u952e\u76d8<\/td>\u5931\u7126 input.blur()<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    \u2757 \u516b\u3001\u5e38\u89c1\u95ee\u9898\u4e0e\u89e3\u51b3\u65b9\u6848<\/h1>\n\n\n\n
    1. \u641c\u7d22\u6846\u70b9\u51fb\u653e\u5927\u955c\u56fe\u6807\u4e0d\u89e6\u53d1\uff1f<\/h3>\n\n\n\n
    \u2192 \u4f7f\u7528\u4e8b\u4ef6\u4ee3\u7406\u6216\u76d1\u542c\u5bb9\u5668\u70b9\u51fb<\/p>\n\n\n\n
    2. iOS \u641c\u7d22\u6846\u9ed8\u8ba4\u5706\u89d2\u592a\u5927\uff1f<\/h3>\n\n\n
    \ninput[type="search"] {\n    -webkit-appearance: none;\n    border-radius: 0;\n}\n\n<\/pre><\/div>\n\n\n
    3. autocomplete \u5173\u4e0d\u6389\uff1f<\/h3>\n\n\n
    \n&lt;input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2b50 \u4e5d\u3001\u5b8c\u6574\u53ef\u8fd0\u884c\u793a\u4f8b\uff08\u5e26\u56fe\u6807 + \u641c\u7d22\u4e8b\u4ef6 + \u56de\u8f66\u641c\u7d22\uff09<\/h1>\n\n\n
    \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="UTF-8">\n&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">\n&lt;title>\u641c\u7d22\u6846\u793a\u4f8b&lt;\/title>\n\n&lt;style>\n    .search-box {\n        position: relative;\n        width: 100%;\n    }\n    .search-box input {\n        width: 100%;\n        padding: 10px 35px;\n        border-radius: 25px;\n        border: 1px solid #ccc;\n        font-size: 16px;\n    }\n    .search-box .icon {\n        position: absolute;\n        left: 12px;\n        top: 10px;\n        font-size: 18px;\n        color: #888;\n    }\n&lt;\/style>\n&lt;\/head>\n\n&lt;body>\n\n&lt;h3>HTML5 Search Box \u793a\u4f8b&lt;\/h3>\n\n&lt;div class="search-box">\n    &lt;span class="icon">\ud83d\udd0d&lt;\/span>\n    &lt;input id="searchInput" type="search" placeholder="\u641c\u7d22\u5546\u54c1\u3001\u5185\u5bb9\u2026">\n&lt;\/div>\n\n&lt;div id="result" style="margin-top: 20px;">&lt;\/div>\n\n&lt;script>\nconst search = document.getElementById("searchInput");\nconst result = document.getElementById("result");\n\nsearch.addEventListener("keydown", e => {\n    if (e.key === "Enter") {\n        result.innerHTML = "\u4f60\u641c\u7d22\u4e86\uff1a" + search.value;\n    }\n});\n\nsearch.addEventListener("search", () => {\n    result.innerHTML = "\u641c\u7d22\u6846\u6e05\u7a7a\u6216\u63d0\u4ea4\uff1a" + search.value;\n});\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
    \u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd HTML5 \u641c\u7d22\u6846\uff08Search Box\uff09\u6700\u5168\u8be6\u89e3\uff1a\u5305\u542b\u8bed\u6cd5\u3001\u5c5e\u6027… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/90\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}