mdb_autocomplete and Ajax update

Hi O1ivier, I am here to help you.

Your mdb initialization code is fine and should work well so we need to find the problem in other parts of the code. MDB autocomplete appears on users typing and at the moment of key press your tab gets created and it may not exist before initialization. Did you test it? Can you show me console.log(tab); before $('#adrVille').mdb_autocomplete({data: tab});. Maybe try to create a tab of values you are trying to assign to autocomplete before initializing if that's the case? Does $('.mdb-autocomplete-wrap') exist before you are trying to make it visible?

If you seek an answer to another problem here are some questions. Our autocomplete is triggered to be cleaned and created over again every time someone types a letter in the input to show only matching values of the array. Are you trying to display autocomplete before someone type something in it? It won't appear because before creating autocomplete checks if (input.length) the autocomplete won't get created otherwise.

I can not find someone's ready solution for your problem in our database so if we work out this together it will be great for the future users.

If you need additional help I am here for you.

Best Regards, Piotr

I think we are in the second case. Because the container appears quickly before disappearing. I managed with a delay but it's not very clean;

$('#adrVille').keypress(function(evt) {
if ($('#adrVille').val().length>=4) {
//$('.mdb-autocomplete-wrap').remove();
$('.mdb-autocomplete-wrap').children().remove();
var tab =[];    
$.ajax({
   url : 'appels/fiche-ville.php?', 
   type : 'POST', 
   dataType : 'jsonp',
   data : { ville : $("#adrVille").val() },
   success: function( response ) {
   if (response.length > 0) {               
       response.forEach(function(item, index, array) 
        { 
          tab.push(item['ville']);
          $('.mdb-autocomplete-wrap').append('<li>'+item['ville']+'</li>');
        }
        );
       $('#adrVille').mdb_autocomplete({data: tab});
       setTimeout(function() {
       $('.mdb-autocomplete-wrap').css('visibility', 'visible');
        }, 1000);              
   }
   }
});
}

});

Thanks!

Here is my best solution. It's not perfect (it works from the second call of ajax)

window.tab=[];      
$('#adrVille').keypress(function(evt) {
    var obj=$(this);
    if (obj.val().length>=2) {
    tab =[];    
    $.ajax({
           url : 'appels/fiche-ville.php?',  
           type : 'POST', 
           dataType : 'jsonp',
           data : { ville : obj.val() },
           success: function( response ) {
               if (response.length > 0) {               
                   response.forEach(function(item, index, array){
                       tab.push(item['ville']);
                   });  
                   $.when(obj.mdb_autocomplete({data: tab})).then(function(){
                        $('.mdb-autocomplete-wrap').css('visibility', 'visible');
                    });   
           }
        }
        })
    }
}); 

Great! I am glad we worked that out. I will link future support questions about this topic to your solution.

Best Regards, Piotr