如何使用Thymeleaf将值从输入框传递到模态？

Question

我正在尝试从下拉搜索功能中选择一个项目。然后，一旦用户单击一个项目并按下查看按钮，它便应该以模态提示他们。在模态中，我想要对象名称以及它的其他字段和变量。我在Thymeleaf中使用Spring-boot。我试图从逻辑上考虑实现这一目标的最简单，最有效的方法。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs ">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="create.html">Create</a>
                </li>
                <li class="nav-item dropdown ml-md-auto">
                     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Account</a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                         <a class="dropdown-item" href="#">Settings</a>
                        <div class="dropdown-divider">
                        </div> <a class="dropdown-item" href="#">Log out</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3 class="text-center">
                Mapping
            </h3>
        </div>
    </div>

    <div class="row" id="search-row">
        <div class="col-md-8">
            <div class="filter-search">
            <input class="form-control" id="myInput" type="text" placeholder="Search..">

            <div class="list-group" id="myList">
                <a href="#" class="list-group-item list-group-item-action"><p>Albert</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Milind</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Jackson</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Dale</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Kennedy</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Mateo</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Mike</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Albert</p></a>
                <a href="#" class="list-group-item list-group-item-action"><p>Milind</p></a>
            </div> 
            </div>
        </div>

        <div class="col-md-4">
            <span class="input-group-btn">
                <button type="button" class="btn btn-success" id="modal-1" href="#modal-container-1" data-toggle="modal" onclick="clickedModal()">View</button>

                <div class="modal fade" id="modal-container-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="myModalLabel">
                                    Modal title
                                </h5> 
                                <button type="button" class="close" data-dismiss="modal">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                    <div class="col-md-9 selectConfig" id="wrapper">
                                            <span class = "label label-default center">Application Name:</span>
                                            <input type="text" class="form-control" id="pwd" value="Temp" name="pwd">
                                            <span class = "label label-default center">Tier:</span>
                                            <select class="form-control" id="exampleFormControlSelect1">
                                                    <option>1</option>
                                                    <option>1</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                  </select>  
                                        </div>    
                            </div>
                            <div class="modal-footer">

                                <button type="button" class="btn btn-primary" onclick="addFile()">
                                    Next
                                </button> 
                                <button type="button" class="btn btn-secondary" onclick="removeElement('sel-1')">
                                    Back
                                </button>
                            </div>
                        </div>

                    </div>

                </div>
            </span>
        </div>

    </div>

</div>

    <script src="js/script.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script> 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

/* ------------------------------------------------------------------------ */ 
/* HEADERS */
/* ------------------------------------------------------------------------ */

h3 {
    margin-top: 30px;
}



/* ------------------------------------------------------------------------ */ 
/* MODAL */
/* ------------------------------------------------------------------------ */

.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

.selectConfig {
    margin: 0 auto 0 auto;          /* Configures each select tag to be centered */
}

.form-control {
    margin: 20px auto 20px auto;    /* Configures each select tag to have spacing on top and bottom  */
}


.modal-btn {
    background-color: #fff;
    color: #000;
    font-weight: 600;

}


/* ------------------------------------------------------------------------ */ 
/* SEARCH FIELD */
/* ------------------------------------------------------------------------ */

.filter-search {
    width: 100%;
}

.list-group {
    position: absolute;
    height: 500%;
    overflow: auto;
}

#search-row{
    width: 60%;
    margin: 3% 15% 3% auto;
}

#myInput{
    margin-top: 0;
}

$(document).ready(function() {
    $("#myList").toggle();

    $("#myInput").on("focus", function() {
      $("#myList").toggle();
    });

    $("#myInput").on("focusout", function() {
      // Here, it'll wait 100 miliseconds to hide the list.
      setTimeout(function() {
        $("#myList").toggle();
      }, 250);
    });

    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();

      $("#myList a").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });

    // This is the code to populate the field after selecting an option.
    $("#myList a").on("click", function() {
        var texto = $(this).text();
        $("#myInput").val(texto);
      });
  });