关于input记忆功能，实现autocomplete.js

最新推荐文章于 2024-04-05 11:20:46 发布

wuyeusanshi

最新推荐文章于 2024-04-05 11:20:46 发布

阅读量2.2k

点赞数 4

本文链接：https://blog.youkuaiyun.com/wuyeusanshi/article/details/106618621

版权

本文介绍了HTML input的autocomplete属性，用于开启输入框的记忆功能。由于浏览器的缓存记忆特性，作者根据需求实现了该功能。文章展示了使用JQuery UI封装的JS以及CSS样式控制的代码示例，包括本地数据和后台数据的处理方法，帮助输入框加载记忆数据。

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

功能介绍

这是一个html的input属性autocomplete，可以简单的理解成是否打开input的记忆功能，详细介绍自行百度。

实际操作

效果图如下

因为游览器自带的缓存记忆，然后客户的一句唠叨，我就要做这个苦逼的东西，后端程序员真的难，废话不多说，下面上代码。
在这里插入图片描述

代码

实现功能首先要带入由JQUI封装好的JS

// An highlighted block
<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.autocomplete.js"></script>;

我用的是3.2.1JQ，建议最低的1.8，目前那些版本不支持，我没测试过，毕竟俺是后端小弟。

必不可少的也有CSS的样式控制

.autocomplete-suggestions {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow

最低0.47元/天解锁文章