将Jquery自动完成功能转换为使用标签

Question

我有一个具有自动完成功能的jquery工作实例（搜索并在我的控制器中命中了route->函数，该函数查询数据库并返回无序列表中匹配的结果）

这很好用，但是我想知道如何合并标签。

基本上，如果您输入“ HTML”并且与之匹配，我想将其作为标签，并且如果您输入不存在的“ NewLanguage”，则按Enter键也将使它成为标签。这样，您可以输入可以在最终ajax调用中提交的多个值。

如何将其转换为也使用标记？

$(document).ready(function(){

         $('#tag_name').keyup(function(){ 
                var query = $(this).val();
                if(query != '')
                {
                 //var _token = $('input[name="_token"]').val();
                 $.ajax({
                  url:"{{ route('campaigns.search') }}",
                  method:"POST",
                  data:{query:query, _token: '{{ csrf_token() }}'},
                  success:function(data){
                   $('#tagList').fadeIn();  
                            $('#tagList').html(data);
                  }
                 });
                }
            });

            $(document).on('click', 'li', function(){  
                $('#tag_name').val($(this).text());  
                $('#tagList').fadeOut();  
            });  

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
                                        <input type="text" name="tag_name" id="tag_name" class="form-control input-lg" placeholder="Enter Country Name" />
                                        <div id="tagList">
                                        </div>
                                    </div>