JavaScript 实现搜索框联想功能

最新推荐文章于 2023-09-04 21:33:03 发布

Elanie1024

最新推荐文章于 2023-09-04 21:33:03 发布

阅读量475

点赞数

文章标签： javascript 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/Elanie1024/article/details/128575475

版权

本文介绍了如何使用 JavaScript 在前端实现搜索框的联想功能。通过基础的 HTML 结构，结合 JavaScript 数组来存储测试数据，然后利用 CSS 设计搜索框和联想菜单的样式，并编写 JavaScript 代码监听输入框事件，实现实时的联想建议展示。

摘要由CSDN通过智能技术生成

基础 HTML 代码

实例

<!-- autocomplete="off" 确保表单已关闭自动填充功能： -->
<form autocomplete="off" action="/index.php"> 
 <div class="autocomplete" style="width:300px;">   
 <input id="myInput" type="text" name="s" placeholder="请输入搜索内容"> 
 </div>  
<input type="submit">
</form>

再准备基础的搜索测试数据，是一个 JavaScript 数组：