将<li>值id设置为<input />值，但在输入中显示li文本

Question

$(document).on('click', 'li', function() {
  $('#operator_name').val($(this).text());
  let y = $(this).val();
  $('#operator_name').attr('data-id', y);
  $('#operator_list').fadeOut();
  alert(y)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="operator_name" name="operator_name" value=" ">
<div class="dropdown show " id="operator_list"></div>

这是刀片

public function fetch(Request $request) {
  if ($request->get('query')) {
      $query = $request->get('query');
      $data = DB::table('operators')
          // ->where('firstname', 'Like', '%{$query}%')
          ->where('firstname', 'like', '%' . $query . '%')
          ->orWhere('middlename', 'like', '%' . $query . '%')
          ->orWhere('surname', 'like', '%' . $query . '%')
          ->get();
      $output = '<ul class="dropdown-menu" style="display:block;">';
       foreach ($data as $row) {
          $output .= '<li class="dropdown-item" value=' . $row->id . '>'. $row->surname.', '.$row->firstname.'</li>';
      }
      $output .= '</ul>';
      echo $output;
  }
}

这是控制器。

我设法在输入标签中显示li文本时提醒li id，但它的输入文本将保存在数据库中，我想同时保存li id，同时在输入标签中显示li文本，如何要做吗？