<!-- Подсказки по ФИО и адресам к «Тильде блок BF204N» -->

<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.1/dist/css/suggestions.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.1/dist/js/jquery.suggestions.min.js"></script>

<script type="text/javascript">
    function createSuggestions($form){
        $form.find("[name='name']").suggestions({
          token: "7d85413b16caef9e486a1349ec83a16955b71828",
          type: "NAME",
      });
       $form.find("[name='address']").suggestions({
          token: "7d85413b16caef9e486a1349ec83a16955b71828",
          type: "ADDRESS",
          
          onSelectNothing: function() {
                $('.uc-suggest-form [name="address"]').val('');
                $('.adress-group').addClass('js-error-control-box');
                $('.adress-group .t-input-error').text('Обязательно выберите адрес из списка');
          },

      });
    }
    
    $(document).ready(function(){
        setTimeout(function() {
            $('.uc-suggest-form .t-input-group').addClass('t-text');
            let $form = $(".uc-suggest-form form ");
            createSuggestions($form);
            
            $('.uc-suggest-form [name="address"]').closest('.t-input-group').addClass('adress-group');
            
            $('.uc-suggest-form').on('input' , '[name="address"]', function(){
                $('.adress-group').removeClass('js-error-control-box');
                $('.adress-group .t-input-error').text('Обязательное поле');
            });

        }, 1000);
    })

</script>



<style>

.uc-suggest-form  .t-input-block{
        overflow:visible !important;
} 

.suggestions-wrapper .suggestions-suggestions {
    position: absolute;
    z-index: 99;
    border: none;
    width: 90%;
    border-radius: 14px;
    box-shadow: 0 0 10px 0 #c8c8c8;
    padding: 10px;
}

.suggestions-suggestions strong {
   font-weight: 400;
   color: #0068ff
}

.suggestions-suggestions.suggestions-mobile .suggestions-suggestion {
   border-bottom: 1px solid #ddd
}

.suggestions-suggestion {
   padding: 7px 4px;
   overflow: hidden;
    cursor: pointer;
}

.suggestions-suggestion:hover {
   background: #f7f7f7;
   border-radius: 4px;
    
}
    
</style>