在数据列表中添加自定义值时显示新的输入字段

如何解决在数据列表中添加自定义值时显示新的输入字段

我在我的 Laravel 项目中创建了一个数据列表

我的观点和脚本

<input type="text" id="user_name" name="user_name" list="users"">

<script>
$(document).ready(function(){

 $('#user_name').on('keyup',function(){ 
        var query = $(this).val();
         var _token = $('input[name="_token"]').val();
         $.ajax({
          url:"{{ route('search_user_name') }}",type:"post",data:{query:query,_token:_token},success:function(data){
           $('#user_name').show();  
           $('#user_name').html(data);
         }
        })
    });

    $(document).on('click','li',function(){  
      var value = $(this).text();
        $('#user_name').val(value); 
        $('#user_name').html("");  
    });  

});
</script>

我的控制器

public function search_user_name(Request $request)
    {
        if($request->get('query'))
      {
        $query = $request->get('query');
        $data = DB::table('user')
          ->where('name','LIKE',"%{$query}%")
          ->get();
        $output = '<datalist id="users_list" name="users_list">';
        foreach($data as $row=>$value)
        {
         $output .= '
         <option>'.$value->name.'</option>
         ';
        }
        $output .= '</datalist>';
        echo $output;
      }
    }

因为数据列表为您提供添加自定义值所以我只希望每当用户编写自定义值时该值将保存在该数据库表中并完成数据库表的其他字段仅当用户输入自定义时才会弹出额外的输入字段值有什么方法可以实现吗？