H5实现搜索记录功能

最新推荐文章于 2025-05-19 18:21:43 发布

威士忌荡出の忧伤

最新推荐文章于 2025-05-19 18:21:43 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： h5搜索记录 h5历史搜索

本文链接：https://blog.youkuaiyun.com/qq_16503045/article/details/83751669

这是一个使用HTML5实现的搜索历史记录功能，包括搜索框、历史记录展示和删除功能。用户可以查看并清除过去的搜索记录，且支持在搜索框中直接点击历史记录填充搜索内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="utf-8">
    <title>搜索记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <style>
    .history{text-align:center;}
    #sec{width:50%;overflow:hidden;text-align:left;height:38px;border:1px solid #ccc;border-radius: 10px;}
    .delete:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
    .delete>div {border-radius: 50px;float: left;height: 23px;border: 1px solid #ccc;background: #E0E0E0;
    margin-top: 14px;margin-right: 10px;overflow:hidden;}
    #search{width: 141px;height: 37px;font-size: 14px;line-height: 14px;color: #959595;padding-bottom: 2px;}
&