时间戳

首页 > 解决方案 > 如何在 Bootstrap 中添加点击添加自动填充卡片？

html - 如何在 Bootstrap 中添加点击添加自动填充卡片？

问题描述

如何添加一个表单，除了提供自定义文本输入，我们还可以在屏幕上添加一些预先构建的选项。如果我们点击这些选项，表格会自动填充这个选项吗？

进一步详细解释：

如果我们在 Bootstrap HTML 中有一个表单。用户可以用文本输入来填写。除此之外，如果用户希望他们可以单击一些预先构建的选项来使用此选项的内容填写表单。

标签： htmltwitter-bootstrap

解决方案

如果您想创建类似 Google 搜索建议的内容，那么<datalist>标签可以显示输入建议。MDN 是这样定义的：

HTML 元素包含一组元素，这些元素表示可在其他控件中选择的允许或推荐选项。

引导数据列表解决方案

在这种情况下，不依赖服务器，选项被预先写入原始数据。Bootstrap 没有明确的数据列表模板，但custom-select该类可能是一个不错的选择。

<!-- Libraries -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Datalist implementation -->
<label for="web-browser-choice">Web browser choice:</label>
<input class="custom-select" list="suggested-browsers" id="web-browser-choice" name="web-browser-choice" />

<datalist id="suggested-browsers">
    <option value="Brave">
    <option value="Google Chrome">
    <option value="Internet Explorer">
    <option value="Lynx">
    <option value="Microsoft Edge">
    <option value="Mozilla Firefox">
    <option value="Opera">
    <option value="Safari">
    <option value="WorldWideWeb">
</datalist>

推荐阅读