icefox0801 / materialize-autocomplete Goto Github PK

Hi,

When the user uses the multiple autocomplete, and selects an option, a chip of this option is created. Is there any way to hide the id that is being show along with the name of option?

Thanks

It does not work with the latest version of materialize 1.0.0-rc.1
Does anyone know a solution?
Thanks so much

ERROR MESSAGE:

Uncaught TypeError: Cannot set property 'tabIndex' of null
at s.value (materialize.min.js?ver=4.9.5:6)
at new s (materialize.min.js?ver=4.9.5:6)
at Function.value (materialize.min.js?ver=4.9.5:6)
at Function.value (materialize.min.js?ver=4.9.5:6)
at r.fn.init.jQuery.fn.(/orariautobus/anonymous function) [as dropdown] (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js?ver=4.9.5:6:12862)
at r.fn.init.$.fn.materialize_autocomplete (jquery.materialize-autocomplete.min.js?ver=4.9.5:1)
at HTMLDocument. (scripts.js?ver=4.9.5:50)
at j (jquery-3.2.1.min.js?ver=4.9.5:2)
at k (jquery-3.2.1.min.js?ver=4.9.5:2)

How to add highlight for matching typed text? For example when we typed goo then the result will be Google

The lighten of the background color of the buttons on hover works only with the default color, if you choose another class color (red, blue, etc, even teal that is the default color) the effect doesn't appear anymore.
Would be nice if the lighten of .btn and .btn-large with handled color class of materialize would keep the lighten effect on hover.

input
[{"id":4,"text":"viena adrese"},{"id":11,"text":"Sia \"Zirdzi\u0146\u0161\""}

result
input value:
value="Sia"
dropdown content
<li data-text="Sia " zirdziņš""=""><a href="javascript:void(0)">Sia "Zirdziņš"</a></li>

var resultCache = $.ajax({
        url: 'http://contact.dev/api/autocomplete/person_tags',
        type: 'GET',
        success: function (data) {
            personTags = data;
            var multiple = $('#person_tags').materialize_autocomplete({
                multiple: {
                    enable: true
                },
                appender: {
                    el: '.ac-users'
                },
                dropdown: {
                    el: '#multipleDropdown'
                }
            });
            resultCache = personTags;
            console.log(resultCache);
            multiple.resultCache = resultCache;


        },
        error: function (xhr, resp, text) {
            console.log(xhr, resp, text);
        }

    });

please help! How to use getData option for ajax call.

I'm using autocomplete with multiple and using ('#el').html('') to clear all the tag values.
But that clears the values in the input box which is shown on the UI and not from the internal stack.

Hence, the onExist function is called when trying to enter new values after clearing.
Kindly tell us what's the right way to clear the tags list.

I'm Trying to make first request onfocus, bringing all itens on it.

Some one knows how do that?

Hi,
I use a multiple autocomplete and in the code bellow the <%= item.class %> work perfectly in itemTemplate but not in tagTemplate

    ...
    appender: {
        el: '.ac-ingr',
	tagTemplate: '<div class="chip <%= item.class %>" data-id="<%= item.id %>" data-text="<% item.text %>"><%= item.text %><i class="material-icons close">close</i></div>'
    },
    dropdown: {
        el: '#ingredientsDropdown',
        itemTemplate: '<li class="ac-item <%= item.class %>" data-id="<%= item.id %>" data-text="<%= item.text %>"><a href="javascript:void(0)"><%= item.text %></a></li>'
    },
    ...

Any idea?
Thanks in advance!

I have an AJAX script that queries my DB and returns a JSON object of all the values that match a search. For example, after typing "sala" in a username input, the dynamic script would return ...

[{ 'id': '5284', 'text': 'Salazar' }, { 'id': '31241', 'text': 'Salamanca'}, { 'id': '82241', 'text': 'Saladface'}]

... and I would want these 3 options to appear in the dropdown. If they then type "d", then only the 'Saladface' record appears (and selecting it would give the hidden input a value of 82241).

I have no problem getting this to work with <select>s and other frameworks. But this script is beautifully complex, so I thought I'd ask ... what jquery can I call to dynamically replace the <li>s in your script?

How to set initial values?

trying to set value by:

let autocomplete = this.input.materialize_autocomplete(); autocomplete.append({id:recipient._id, text:recipient.profile.name});

it returns an error:

TypeError: self.value.some is not a function
at Autocomplete.append

in my options:

multiple: {
                enable: true,
                onAppend: function (item) { 
                   pushToRecipients(item);
                },
                onRemove: function (item) {
                    removeFromRecipients(item);
                }
 }

I can succesfully add data when using the dropdown form, but i can't initialize the default values. tried to use setValue(), but it only sets the value of the input.

What I want is to set the default values, also adding it to tags..

i tried setting the value by, setting:

autocomplete.value = [{id:'someId', text:'sometext'}];

but when i select the someId in dropdown, it accepts the value and tag error does not appear.

thanks!

Hey,

As sone as I Implement the singleDropdown like in the Example I cant see the list items. They are generating but they are Invinsable. I dont know the reason for this.

The Code generating is:

<input placeholder="test" id="IngreName" class="active" style="" type="text">
<ul id="singleDropdown" class="dropdown-content ac-dropdown" style="display: block;">
<li class="ac-item" data-id="1" data-text="value">value</li>
<li class="ac-item" data-id="2" data-text="test">test</li>
</ul>

I use this JS code:

    $('#IngreName').materialize_autocomplete({
        limit: 10,
        dropdown: {
            itemTemplate: '<li class="ac-item" data-id="<%= item.id %>" data-text="<%= item.text %>"><%= item.text %></li>',
            el: '#singleDropdown'
        },
        getData: function (value, callback) {
            if (value.length >= 3) {
                $.get("/Ingredient/Search", {term: value})
                    .done(function (data) {
                        callback(value, data);
                    });
            }
        }
    });

My HTML is:

    <input th:type="text" th:id="IngreName" placeholder="test"/>
    <ul id="singleDropdown" class="dropdown-content ac-dropdown"></ul>

I have an autocomplete with minimum number of characters before autocomplete starts set at 0 and on focus the dropdown doesn't appear or appear for a fraction of a second before disappearing.
Sorry for my poor english.
Codepen example.

Is it possible to have it so the user can autocomplete multiple predefined categories, but if they want to add their own, they can?

Thanks for the Plugin.

Trying to generate an autocomplete list from a database file (persistent) stored on a local drive.My query gives out the list of names from the Json formatted database values.I'm trying to populate the same names through autocomplete.

My Code

(function () {
                    var single = $('#singleInput').materialize_autocomplete({
                        multiple: {
                            enable: false
                        },
                        dropdown: {
                            el: '#singleDropdown'
                        },
                        getData: function(singleInput,customerNames){
                          customerNames(singleInput,clientsList);
                        }
                        
                    });

where singleInput is the name of my input id.I'm getting an error in the console when key pressed the input box.What Am I doing wrong ?

list.forEach is not a function

Hi!

How am I supposed to provide available "tags" which can be searched?
Is there any other way than caching items on my own and then providing them with .resultCache?

jquery.js, materialize.min.js, jquery.materialize-autocomplete I included all of these packages, Styles are included as well, but nothing appears if i copy the example. I just get no autocomplete and no errors.
When I tried to use it a bit changed, i get autocomplete with corrupted files.

var autocomplete = $('#symptoms').materialize_autocomplete({
limit: 20,
multiple: {
enable: true,
maxSize: 10,
},
appender: {
el: '#someEl'
},
getData: function (value, callback) {
console.log('sympt')
data = [];
$.ajax({
"type": "POST",
"dataType": "json",
"url": "{% url 'symptoms-autocomplete' %}",
"data": {'name': $('#symptoms').val()},
"success": function (result) {

                        for (var i = 0; i < result.length; i++) {
                            data[i] = {'id': result[i]['id'], 'text': result[i]['name']}
                        }
                        console.log(data);
                        callback(value, data);
                    },
                    "error": function (error) {
                        console.log(error);
                        callback(value, data);
                    }
                });

            }
        });

data that is passed have format at it's said it the docs.

if i click on the dropdown it disappears and doesn't populate the field

301 line : var $li = $t.closest('[data-id');

should be
[data-id]

Hi,

I got an issue when I try to delete some selected value, loaded with the page. ID's are not deleted from the hidden input. I'm using non numerical ID's. I solve the problem by modifying the source code this way in the remove method :
`
//
remove: function (item) {
var self = this;

        self.$appender.find('[data-id="' + item.id + '"]').remove();
        self.value = self.value.filter(function (selectedItem) {
            return selectedItem.id != item.id; // Change strict test
        });

        var valueStr = self.value.map(function (selectedItem) {
            return selectedItem.id;
        }).join(',');

        if (self.options.hidden.enable) {
            self.$hidden.val(valueStr);
            self.$el.data('value', valueStr);
        }

        self.$dropdown.html('').hide();

        if ('function' === typeof self.options.multiple.onRemove) {
            self.options.multiple.onRemove.call(self, item);
        }

    },
//

`
Is that normal or do I use badly this feature ?

Trying to use this plugin in my reactjs project, whenever i import the plugin and try to start my server i get this error:

C:\Users\user pc\Desktop\citydrill\node_modules\materialize-autocomplete\jquery.materialize-autocomplete.js:447
$.fn.materialize_autocomplete = function (options) {
^

TypeError: Cannot set property 'materialize_autocomplete' of undefined
at C:\Users\user pc\Desktop\citydrill\node_modules\materialize-autocomplete\jquery.materialize-autocomplete.js:447:35
at noop (C:\Users\user pc\Desktop\citydrill\node_modules\materialize-autocomplete\jquery.materialize-autocomplete.js:4:26)
at Object. (C:\Users\user pc\Desktop\citydrill\node_modules\materialize-autocomplete\jquery.materialize-autocomplete.js:11:2)
at Module._compile (module.js:410:26)
at Module._extensions..js (module.js:417:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\user pc\Desktop\citydrill\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (C:/Users/user pc/Desktop/citydrill/client/js/components/Landing.jsx:9:1)
at Module._compile (module.js:410:26)
at loader (C:\Users\user pc\Desktop\citydrill\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .jsx] (C:\Users\user pc\Desktop\citydrill\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)

Here's how i'm using it:

import materialize_autocomplete from 'materialize-autocomplete';
$('input.autocomplete').materialize_autocomplete({
dropdown: { el: '#keywords_ac' },
getData: self.getAutocompleteData,
onSelect: function(item) {
history.push('/building/' + item.id);
}
});

Any ideas?

Hello there, we want to use this code in a commercial product and thus wanted to ask about the license conditions.

Hi,

Thanks for the great component. I'm unclear how I can use this with my project that is based on Angular2 and using Materialize CSS.

Thanks for your help.

When I try run it inside of chrome extension I am getting following exception after click a result item.
So problem is not getting ajax result but modifying dom after selection.
I tried to comment out lines in js file related with dom modification but no luck.
Any idea how to resolve the problem ?

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://ssl.google-analytics.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

onselect doesnt fire.

There should be a option by which we can prevent user to enter random text which are not available on the populated list. If there's no item on list then user should proceed to form submit.

The autocomplete data isn't escaped for being presented in HTML. For example try using '<script>alert("hello")</script>' as the text of an item, and you'll see an alert pop up when showing that item in the autocomplete.

This is kind of a big security hole in the component...

how can i get the data on multiple select box when hitting the submit form?

I figured out how to use it. Delete.

Data pattern suggest doesnt looks easy to construct.
It will be great if its simple as:

			data: {
			  "Aluminium": null,
			  "Copper": null,
			  "Lead": null,
			  "Zinc": null,
			  "Crude Oil": null,
			  "Nickel": null,
			  "Silver Mini": null,
			  "SilverGold": null,
			  "Natural Gas": null,
			  "Cpo": null,
			  "Gold Mini": null,
			  "Menta Oil":null
			}

HI! I am implementing your plugin into elm application and I have to track changes done both on the Elm side and js-autocomplete side.

The problem is that when I trigger event from the Elm side, tag is added and so is called onAppend function, which can't provider any evidence whether tag is provided by user or programatically, further on the onAppend function calls back to the Elm side and I can't distinguish between new tag added by user or just loop from Elm side.

I know I could just add up another function which doesn't call event, but I don't find this the right way...
How can I distinguish?

Also I looked up source code and... what's the difference between setValue and append, or is it just meant as alias?

Hello,

i have not been successful till now to use it for my project. I need your help as required below-

JSON coming from server is as follows

[{"id":"Koh Chang Island","text":"Koh Chang Island"},{"id":"Goa","text":"Goa"},{"id":"Bangkok","text":"Bangkok"},{"id":"Allahabad","text":"Allahabad"},{"id":"Goa","text":"Goa"}]

How do i create the required data for autocomplete ?

Pls help

I don't know which jQuery version is currently active, but because .size() function has been deprecated in 3.0, error is thrown each time navigating trough dropdown with arrow keys. Please correct it to .length, so that it works. 😃

$.size()

1.According to the documentation :-
var autocomplete =$('#el').autocomplete({});
2.According to the given examples :-
var single = $('#singleInput').materialize_autocomplete({});

How would I go about getting a functionality similar to the function of a standard autocomplete, which would automatically update the dropdown based on what you enter. In the current method, any data entered in the input is lost to the plugin as it simply pulls all data from the array and displays them.
My current function
var multiple = $('#multipleInput').materialize_autocomplete({ multiple: { enable: true }, limit:5, appender: { el: '.ac-users' }, dropdown: { el: '#multipleDropdown' }, getData: function (value, callback) { // ... callback(value, data); } });

Tested the example on an iPhone 5S and 6, did not work on either. The dropdown list does not appear.

Is there a away to call a handler when text has been entered that does not match any results, and the select dropdown is closed?
I wish to only allow entries from the valid list of results.

Thanks,

Rob

Very usefull widget. Can you provide example on event handler,triggered when user select item from dropdown?
Thank you!

This seems beautiful and I love materialize style, however it is not clear to me how to use the getData ---
assuming i have a (server that returns a) json with tags [{id: 'yellow', text : 'Yellow'}, {id: 'green', text : 'Green'}] - how doe i use it? I tried the following for no avail. Thanks !!!

 $(function(){
        var multiple = $('#multipleInput').materialize_autocomplete({
            multiple: {
                enable: true,
                maxSize : 5
            },
            appender: {
                el: '.ac-colors'
            },
            dropdown: {
                el: '#multipleDropdown'
            },
            getData: function (value, callback) {
                data = [{id: 'yellow', text : 'Yellow'}, {id: 'green', text : 'Green'}];
                callback(value, data);
            }
        });
    });

Hi,

Looks like line 429:
self.$hidden.val(item.value);

Should be item.id since item.value is undefined in that method

Hi, I can't find a way to update the data list in the autocomplete.

I've tried re-inicialize, re-render.

I need something like updateDate method. Is there something like that?

Hi, first thank you for this work.

Is it possible to have the same autocomplete option as the orignial materialize autocomplete.
I mean on their exemple if I type "o" I get microsoft and google, if I type "ro" I get microsoft and what I type is in black. How to have all possible options et the black ?

Thank you