Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: mdb_autocomplete and Ajax update

O1ivier priority asked 5 years ago


Hello, I have a problem to update mdb_autocomplete with the string entered by the user. After updating the Ajax call, the container does not appear automatically. Will someone help me or have a functional example with Ajax?

Thank you

$('#adrVille').keypress(function(evt) {
    if ($('#adrVille').val().length>=4) {
    $('.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']);
            }); 
           $('#adrVille').mdb_autocomplete({data: tab});
           $('.mdb-autocomplete-wrap').css('visibility', 'visible');
       }
       }
    });

    }
});

MDBootstrap staff answered 5 years ago


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

Best Regards, Piotr


O1ivier priority answered 5 years ago


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');
                    });   
           }
        }
        })
    }
}); 


O1ivier priority answered 5 years ago


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);              
   }
   }
});
}

});


MDBootstrap staff commented 5 years ago

Maybe try to create variable containing your array of values in wider range? I belive that creating it over again on everysingle keypress might cause troubles. You shouldn't append li with new items to autocomplete. MDB autocomplete rebuild itself everysingle time someone presses key so it may couse troubles too.

.mdb-autocomplete-wrap doesn't exist before you initialize it with $().mdb_autocomplete();. You can work with this element after initialization.


MDBootstrap staff answered 5 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.8.2
  • Device: All
  • Browser: AlL
  • OS: All
  • Provided sample code: No
  • Provided link: No
Tags