[CONFLICT] JQueryUI "autocomplete" conflicts with MaterializeCSS "autocomplete"

[RhanCandia]

The title says it all.

I was using a May 2015 build of Materialize and I decided to update. I was surprised to see that my autocomplete from JQueryUI broke. After much debugging I found out that Materialize.JS has it's own autocomplete function now.

Any workaround?

EDIT:

Rolled back to 0.97.6 for now.

[fega]

Closed due inactivity, feel free to reopen it if it is still necessary.

[plumma]

I have same problem ;-(

[fega]

@tomscholz @DanielRuf I think that decoupling this in a new JS file should make it simple delete the autocomplete js in the build step.

@plumma did you tried commenting the autocomplete code and run the grunt task to have a personalized copy of materialize?

[DanielRuf]

No, this is part of the forms component. He can rename the function name and rebuild from source.

[DanielRuf]

It's planned to rename all component parts or namespace them completely.

[plumma]

Ok I've done some further diags and it appears Autcomplete is working fine for me on my other pages, my issue I discovered was that when I call Autcomplete as a function it doesn't seem to work. I'm a novice so I suspect I'm doing something wrong.

So for example say I called the 'SearchAutocomplete' function as below it doesn't work, but if I removed it from the function and ran is directly as $('#SearchString').autocomplete, it works ok.

Apologies for the red herring, if anyone has any suggestions would be good.

$('#SearchString').on("input", (function (event) {

                    if ($('#ArticleTypeId').val() == '5') {

                        var numero = String.fromCharCode(event.keyCode);
                        var myArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                        index = myArray.indexOf(numero);// 1
                        var longeur = $('#SearchString').val().length;
                        if (window.getSelection) {
                            text = window.getSelection().toString();
                        } if (index >= 0 & text.length > 0) {
                        } else if (index >= 0 & longeur < 10) {
                            SearchAutocomplete();
                        } else { return false; }

                    }
                    else {
                        
                        SearchAutocomplete();
                    }

                }));

// Autocomplete function

                function SearchAutocomplete() {            

                    $('#SearchString').autocomplete({

                        source: function (request, response) {

                            $('#Search_EggTimer').css('display', 'inline');

                            $.ajax({
                                url: '/KnowledgeBase/Autocomplete',
                                dataType: "json",
                                data: {
                                    term: request.term,
                                    ArticleTypeId: $('#ArticleTypeId').val()
                                },
                                success: function (data) {


                                    $('#Search_EggTimer').css('display', 'none');
                                    response(data);
                                }
                            });
                        },

                        select: function (event, ui) {
                            event.preventDefault();
                            retrieveselectedID(ui.item.value);
                            $('#SearchString').autocomplete("close");

                        },
                        focus: function (event, ui) {
                            event.preventDefault();
                        }
                    });
                }

[plumma]

@fega,

did you tried commenting the autocomplete code and run the grunt task to have a personalized copy of >materialize?

What's a grunt task? :-)

I like your suggestions but I'm not sure how I'd go about this. :-(

I'm running materialize via the CDN, so I presume I can't comment anything out?

@Scripts.Render("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js")

[DanielRuf]

No, you cant. You would have to clone this repository using Git, install the dependencies and run grunt.

[plumma]

Thanks.

I've made a rookie mistake and I've been working with my local site CSS and materialize CSS and had a massive headache fighting the materilize css ha ha

This sounds like a good suggestion, I'll try it out much appreciated.

[MrVictorAssis]

i had the same problem ... so i comment the autocomplete plugin function on materialize.js and the autocomplete mentions on materialize.css and it works !

[dubsnipe]

i had the same problem ... so i comment the autocomplete plugin function on materialize.js and the autocomplete mentions on materialize.css and it works !

This doesn't work if you use CDN...

[DanielRuf]

Generally using files from CDNs is not recommended. Also this us a very old issue and not relevant for v1. Please create a new issue.