实现搜索框自动生成联想词候选

最新推荐文章于 2022-09-05 19:28:08 发布

未出笼的菜包

最新推荐文章于 2022-09-05 19:28:08 发布

阅读量2k

点赞数 1

分类专栏： JS 文章标签： js javascript css html

本文链接：https://blog.csdn.net/JY20180407/article/details/104816260

版权

本文介绍如何利用JavaScript实现搜索框的联想词功能，解决了联想词列表遮挡下方元素的问题，以及提高CSS样式的移植性。通过HTML结构、CSS样式和JavaScript逻辑，创建了一个实用的搜索框联想词组件。

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

1.效果

参考过几个例子，都只是独立HTML显示，导致没考虑到生成的联想列表无法遮挡下面的其他元素，再者，都是独立的HTML，绑定全属性的css导致移植性不佳。

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<!--<link rel="stylesheet" href="static/css/me.css">-->
<link rel="stylesheet" href="static/css/search.css">
<body>
<div class="ui  segme