dynamically loaded mdb_autocomplete generates multiple &

Topic: dynamically loaded mdb_autocomplete generates multiple <ul> layered on top of each other

Oddsium pro asked 6 years ago

Scenario. I have a js-script which as you have entered 3 chars, calls the backend and queries the db and returns the data as json. I then take the result, create the array which I'm to populate the autocomplete with. Basically inside a larger function which I call like this: <input type="search" id="master_tour" name="master_tour" class="form-control mdb-autocomplete_master_tour" oninput="getMasterTour(this.value)"> I have this part which takes the response from the backend and adds it to an array: ******** for (var i = 0; i < team_list.data.length; i++) { teams.push(team_list.data[i].name); } populateAutoComplete(teams); ********* Populate looks like this: ********* function populateAutoComplete(data){ $('.mdb-autocomplete').mdb_autocomplete({ data: data }); } **** My issue is that for each char after the third char entered, a new <ul class="mdb-autocomplete-wrap"><li>xxx</li><li>yyy</li></ul> is generated holding the last search result while the old ones get updated, so if I type "cool car" I'm getting 5 identical <ul> after each other holding the results from the search "cool car', all of them rendered on top of each other... What I expect is that the <ul> is added to, or subtracted from, not that I get one more ul for each time I change the data for the autocomplete. What is worse, is that as I click one of the items in the visible autocomplete, I'm getting a semi random one added to the search field, probably since there is a multitude of <ul> with the same classname Am I doing this all wrong, or is this a bug?

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 1 Best answer

Try to reset autocomplete form each time You load new content. You can make it like this:

$('.mdb-autocomplete-wrap').remove();

Regards

Oddsium pro commented 6 years ago

Already tried adding that as the initial task if the string length was 3 or more, then the backend call, then the array creation, then called the populateAutocomplete function which instantiates it. The .remove() removes the autocomplete alright, unfortunately it blinks on and off per key stroke in the search field and ends with it being removed totally from whatever reason. Tried $('.mdb-autocomplete-clear').click(); as well, did not work either, same issue. If I was to wish, I would love to have it work in a way that you can initialize it as hidden with the initial ul tag, then every time you pass new data to it through $('#form-autocomplete').mdb_autocomplete({ data: states }); it would clear the existing tags and replace them with new -tags holding the new data I just sent to it. After having spent a day trying to get the plugin to work properly, I gave up and for now, I ended up writing my own autocomplete in 2 hours and 15 rows of code that does exactly that + looks like your version. So either I'm going about it completely wrong when I feed it with data from ajax calls, or it's something else going on. If I'm wrong, it would be good for all customers to have some tech documentation on how to use the plugin in different scenarios, like feeding it with ajax, etc.

If I was to wish, I would love to have it work in a way that you can initialize it as hidden with the initial ul tag, then every time you pass new data to it through $('#form-autocomplete').mdb_autocomplete({ data: states }); it would clear the existing tags and replace them with new -tags holding the new data I just sent to it.

After having spent a day trying to get the plugin to work properly, I gave up and for now, I ended up writing my own autocomplete in 2 hours and 15 rows of code that does exactly that + looks like your version.

So either I'm going about it completely wrong when I feed it with data from ajax calls, or it's something else going on.
If I'm wrong, it would be good for all customers to have some tech documentation on how to use the plugin in different scenarios, like feeding it with ajax, etc.

Please insert min. 15 characters.

chrisauret free commented 4 years ago

I have this exact issue and I am just as frustrated with the lack of real-world examples for loading data from the server for this control. It's quite unrealistic that you expect people to load all their static lookup data in the browser as you have done in your simple mdb examples!

Every keystroke generates another < ul class="mdb-autocomplete-wrap">< /ul > element with the results as items within it.e.g. If I enter 'r', 'e', 'd' then there will be three < ul class="mdb-autocomplete-wrap"> 's generated, one for each character inputted.

The advice to reset the autocomplete using "$('.mdb-autocomplete-wrap').remove();" does not work! This is a bug and it hasnt beed fixed for at least 2 years form what I can see.

Please insert min. 15 characters.

chrisauret free commented 4 years ago

I fixed it by making the following change to the standard unminified mdb.js :(I have no idea how to get this change into mdb.min.js which is essential for my production code)Material Design for Bootstrap 4Version: MDB Pro 4.7.6

Change line 26897:

    { 
        key: "setData", 
        value: function setData() { 
            if (Object.keys(this.options.data).length) { 
                var exists = $('.mdb-autocomplete-wrap').length; 
                if (!exists) {
                    this.$autocompleteWrap.insertAfter(this.$input); 
                } 
            } 
        }
     }

And this is a typical example of how to use the autocomplete control by fetching data from an API using ajax:

$("#your-autocomplete-input-field").on("keyup", function(e){

    $.ajax({
        url: 'url to your api',
        type: "GET",
        cache: false,
        data: { input: e.target.value },
        headers: { Authorization: "Bearer " + token } // your API token if needed
    }).done(function (response) {
        // Map response data if needed
        var data = response.map(function (item) {
            return item.FirstName + item.Number
        });

        $("#your-autocomplete-input-field").mdbAutocomplete({ data: data });
    });
});

I fixed it by making the following change to the standard unminified mdb.js :(I have no idea how to get this change into mdb.min.js which is essential for my production code)Material Design for Bootstrap 4Version: MDB Pro 4.7.6

Change line 26897:

<pre class="prettyprint"> { 
 key: "setData", 
 value: function setData() { 
 if (Object.keys(this.options.data).length) { 
 var exists = $('.mdb-autocomplete-wrap').length; 
 if (!exists) {
 this.$autocompleteWrap.insertAfter(this.$input); 
 } 
 } 
 }
 }
</pre>

And this is a typical example of how to use the autocomplete control by fetching data from an API using ajax:

<pre class="prettyprint">$("#your-autocomplete-input-field").on("keyup", function(e){

$.ajax({
        url: 'url to your api',
        type: "GET",
        cache: false,
        data: { input: e.target.value },
        headers: { Authorization: "Bearer " + token } // your API token if needed
    }).done(function (response) {
        // Map response data if needed
        var data = response.map(function (item) {
            return item.FirstName + item.Number
        });

$("#your-autocomplete-input-field").mdbAutocomplete({ data: data });
 });
});
</pre>

Please insert min. 15 characters.

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Oddsium

Pro User 2Support score
1Questions 0Answers 0Snippets