如何根据用户选择使用数据库中的数据自动填充字段答案

【问题标题】：How to auto-populate fields with data from a DB based on user selection如何根据用户选择使用数据库中的数据自动填充字段
【发布时间】：2020-07-29 11:06:59
【问题描述】：

我创建了一个带有选择字段的表单，它允许用户从使用 Spring-Boot/Thymeleaf 从 Postgres 数据库填充的列表中选择一个“特殊项目”。我的问题是：如何使用用户选择的值使用数据库中与用户选择相对应的数据自动填充“项目描述”和“项目所有者”的输入字段？

我是一个新手，所以我不知道这是否可以用javascript来实现？如果不是，实现此目标的一般推荐途径是什么？

这是 HTML 代码：

<form action="">
    <div class="modal-body">
        Special Project Name: <select name="spProject"
            th:sProject="${specialProjectList}" id="spProject"
            style="float: right; width: 200px">
            <option value="0">Select Special Project...</option>
            <option th:each="sProject : ${specialProjectList}"
                th:value="${sProject.projectname}"
                th:text="${sProject.projectname}"
                style="float: right; width: 200px"></option>
        </select>
    </div>
    <div class="modal-body">
        Project Description: <input type="text" id="projectDesc"
            name="projectDesc" style="float: right">
    </div>
    <div class="modal-body">
        Project Owner: <input type="text" id="projectOwner" name="projectOwner"
            style="float: right; width: 200px">
    </div>
    <div class="modal-body">
        Status: <select name="projectStatus" id="projectStatus"
            style="float: right; width: 200px">
            <option value="inProgress">Select project status...</option>
            <option value="inProgress">In Progress</option>
            <option value="complete">Complete</option>
            <option value="onHold">On Hold</option>
        </select>
    </div>
    <div class="modal-footer">
        <button class="btn btn-secondary" type="button"
            data-dismiss="modal">Cancel</button>
        <input type="submit" value="Add" class="btn btnA  btn-primary"></input>
    </div>
</form>

【问题讨论】：

标签： javascript java database spring-boot thymeleaf

【解决方案1】：

这绝对可以使用 JavaScript 来实现。有一个名为 jQuery 的库，我建议你使用它，因为它会让你的工作更轻松。 jQuery 有一个函数change()，只要你改变你的选择就会触发。这是一个基本的实现

$('#spProject').change(() => {
    // call spring controller to retrieve the data from db
});

最后，jQuery 还包含ajax，它也将帮助您调用这个控制器。在ajax 中，您可以指定调用控制器后会发生什么。我会让你做剩下的研究。

所以总的来说，我建议你做的是：

将change() 函数附加到您的select 元素
在您的 change() 函数中，调用您的 spring 控制器并传递从数据库中检索信息所需的数据。
检索返回的数据并显示在字段中

【讨论】：

【解决方案2】：

我使用 jquery AutoComplete https://jqueryui.com/autocomplete/#default 实现了这个功能，步骤如下：-

使用 jquery $.ajax() 获取所需数据并将该数据存储到 json 对象中。为此，您使用 $document.ready() 函数。
在该输入字段上添加 jquery AutoComplete 事件。

如果您需要任何帮助。在下方发表您的评论。

这是一个 jsFiddle：[https://jsfiddle.net/Twisty/6xgg4074/5/]

【讨论】：