jQuery多选择框序列化搜索框，而不是实际选择

我在我的页面上有一个表单使用了这个，上面也有两个搜索字段。我的表单如下所示：

<!-- Target employees tab -->
<div class="tab-pane fade" id="employees" role="tabpanel" aria-labelledby="employees-tab">
  <form class="" action="/assessments/<%=assessment._id%>/employees" method="post" id="employees-form">
    <div class="my-2">
      <div class="form-group">
        <label for="users">Select employees to assess</label>
        <div class="row" id="users">
          <div class="col-5">
            <select name="from[]" id="search" class="form-control" size="8" multiple="multiple">
              <% users.forEach(function(user){ %>
                <option value="<%=user._id%>"><%=user.firstName%> <%=user.lastName%></option>
              <% }) %>
            </select>
          </div>

          <div class="col-2">
            <button type="button" id="search_rightAll" class="btn btn-block"><i class="fas fa-angle-double-right"></i></button>
            <button type="button" id="search_rightSelected" class="btn btn-block"><i class="fas fa-angle-right"></i></button>
            <button type="button" id="search_leftSelected" class="btn btn-block"><i class="fas fa-angle-left"></i></button>
            <button type="button" id="search_leftAll" class="btn btn-block"><i class="fas fa-angle-double-left"></i></button>
          </div>

          <div class="col-5">
            <select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
          </div>
        </div>
      </div>
    </div> <!-- end of .my-2 -->
    <div class="text-center">
      <button type="submit" class="btn btn-primary text-center" style="width: 100px;" id="employees-form-submit"><i class="fas fa-chevron-circle-right"></i> Next</button>
    </div>
  </form>
</div> <!-- end of employees tab -->

---

请尝试

submitAllLeft

和

submitallrighth

您能否详细介绍一下这将如何工作，我不确定我是否理解，抱歉

$(document).ready(function($) {
      $('#search').multiselect({
          search: {
              left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
              right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
          },
          fireSearch: function(value) {
              return value.length > 3;
          }
      });

  $('#employees-form-submit').on('click', function(e) {
    e.preventDefault();
    var form      = $('#employees-form');
    var formData  = form.serialize();
    var url       = form.attr('action');
    $originalItem = form.parent('#employees').siblings('#summary')

    console.log(formData);

    $.ajax({
      url: url,
      data: formData,
      type: 'PUT',
      originalItem: $originalItem,
      success: function(data) {
        target = this.originalItem.find('#employees-summary');
        data.targetEmployees.forEach(function(emp) {
          target.find("ul").append(
            `<li>${emp.firstName} ${emp.lastName} - email: ${emp.eMail}</li>`
          )
        })
        showTab('summary-tab')
      }
    });
  });