JavaScript实现搜索框的自动完成功能(一)

前端之家收集整理的这篇文章主要介绍了JavaScript实现搜索框的自动完成功能(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在很多需要搜索的网站,都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.

先给大家展示下效果图:

  实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。

  先看客户端的HTML:

代码如下:

<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>词<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>完成