Преобразование функции автозаполнения Jquery для использования тегов

Question

У меня есть рабочий экземпляр jquery с автозаполнением (выполняет поиск и выполняет поиск по маршруту -> функция в моем контроллере, которая запрашивает базу данных и возвращает результаты, совпадающие в неупорядоченном списке)

Это прекрасно работает, но мне интересно, как я могу включить тегирование.

По сути, если вы вводите «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>