henrychavez / materialize-tags Goto Github PK

Hi,

I am trying to maintain grades tag in an application and it works for existing data fetched from the server but when I try to add new it submits the form. I have tried to trap the beforeItemAdd but it doesn't stops there. Here's my code:

var grades = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '../api/Grades?query=%QUERY',
                filter: function(list) {
                    return $.map(list, function(grade) {
                        return { name: grade.Name, id: grade.Id };
                    });
                }
            }
        });

        grades.initialize();
        var gradesOptions = {
            trimValue: true,
            maxTags: 3,
            freeInput: true,
            itemValue: 'id',
            itemText: 'name',
            typeaheadjs: {
                name: 'grades',
                displayKey: 'name',
                source: grades.ttAdapter()
            }
        };
        $('.grades').materialtags(gradesOptions);

Any pointers?

Thanks,
Attiqe

I thought, the issue was with me, but just now I see, tab is not working on http://henrychavez.github.io/materialize-tags/examples/ example page too

According to subject.

1. input some letter in input field.

2. loose focus from input field by clicking other place.

3. inputted text changes to tag, and stays input field, too...

1. Source option docs has two typos. Docs say typeahead when it should read typeaheadjs
2. When using Typeahead (0.11.1) styling issues occur with the suggestions as typeahead markup has slightly changed.

Both issues are detailed in this StackOverflow answer

Hello,

I am using your plugin and did what I needed to do.
Now when I inspect the element it does not show that the div with ".materialize-tags" does not hold any css.

How can I fix this ?

I'm using Materialize Tags with jQuery and Materialize. Are there any known issues with compatibility? The tags are displayed above the input text field. Here are my imports and code.

<!-- Import jQuery --> 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet">
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Materialize Tags CSS -->
<link rel"stylesheet" href="./static/css/materialize-tags.css">

<!-- Import jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<!-- Materialize Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<!-- Materialize Tags Input --> 
<script src="./static/js/materialize-tags.js"></script>

HTML

<div class="mapped-resource">
    <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="materialtags" /> 
</div>

CSS

div.mapped-resource input {
    vertical-align:bottom;
}

Hi,

Great package, thx !
https://atmospherejs.com/benan789/materialize-tagsinput

But I dont get this working with meteor.

I tried your basic example:

I seems that the initialisation is missing. On the browser it shows only:
Amsterdam,Washington,Sydney,Beijing,Cairo

in the input field without any decoration.

Would be great to have a simple example how to use in meteor.

Hi there,

First of all, great work on this awesome tagging feature. I'm running into some problems, however. I'm following the usual instructions, ie. adding a data-role to the input field which should contain the tags. When I am typing a tag, followed by a comma, the tag gets created but the initial text still remains in the input field. In the examples on the website the text is deleted.

Here's a fiddle: https://jsfiddle.net/huyhm1as/3/

Could you check what I am doing wrong?
Thanks!
Jeffrey

Slightly overlaps the label.

Hey mate,

Love the little library 👍

Got an issue when using with MaterializeCSS (http://materializecss.com/) where when clicking on the field to begin entering tags, it does not add the "active" class to the label and move it off the input line.

Hope this makes sense..

Cheers!

Hi, it looks like this plugin doesn't allow a json source for tags AND the possibility for the user of typing new tags. Am I wrong?

If I try to type Amsterdam as a first entry. The first part of the word will disappear. Im guessing the size attribute isn't correctly set.

I need to create tags (freeInput mode) not only on key press (enter or comma button) but also on blur (unfocus) event (I mean clicking on another field)
there is a way to accomplish that?

Hi

Just aheads up your npm version css file is different to your github css file version. Under the dist folder. Are there any differences between the js files as well?

Using the code below I am still able to add more than 1 tag. Is maxTags supported?

$('#material-input').materialtags({
        maxTags: 1
    });

In the docs for all examples describing how to use typeaheadjs the first line of "show code" is defines the input field as:

<input type="text" value="Amsterdam,Washington" data-role="materialtags"/>

This seems to initialize the materialize-tags plugin for the field without typeaheadjs. When you then try to set the typeahead settings with $('input').materialtags({typeahead: {}}); the jQuery plugin can't find the typeahead option on the field settings.

Removing data-role="materialtags" solves the issue, and allows initializing the plugin with typeaheadjs enabled.

Hi!
Thank you for creating this useful plugin!

Do you have idea how to exclude existing tags from dropdown?
For example Typeahead section here
There are already predefined tags "Amsterdam" and "Washington"
Write "a" and dropdown appears with two results "Amsterdam" and "Los angeles". Clicking "Amsterdam" highlight existing one "Amsterdam" and does not add new one. This is correct behaviour.
But it would be more convenient if already existing tags will not be shown at dropdown list at all, so user would not fall into this trap.

I can not find this option at bloodhound/typehead docs.

Would be awesome! :)

Am trying to implement suggestion api
This is my code
$('#name').materialtags({
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'name',
displayKey: 'name',
source: function(search, showChoices) {

      var a=[];
     $.ajax({
            url: "<?php echo base_url('common/clients'); ?>",
            async: true,
            method: "post",
            dataType:"json",
            data: {name: search},
            success: function(choices) {
               var a=[]
             $.each(choices,function(k,v){
                   var b={};
				b["text"]=v["name"];
				b["value"]=v["name"];
				a.push(b); 
              });
              console.log(a);
             return a;
            }
          });

    }

},
freeInput: false

});

Hello @henrychavez , could you please change the settings of the repository concerning git-pages.

It would be better to make it point toward the "docs/" folder in the master branch.

I have updated the library to work with the latest version of JQuery and Materialize. Having two branch to maintain is not very useful and not practical.

PS: You will need to change the link on top of the project for this: http://henrychavez.github.io/materialize-tags/

Thanks a lot,

Jonathan

Hi, materialize tags have this bug too
https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/236
but the @xplicit afterSelect solution doesn't work

Hello,

After tags are entered, selected and completed, when focus is on the tags input, after pressing Tab key, focus should move next input field.

Is there an option to get this functionality in materialize-tags library?

Thanks

I'm trying to add a new tag moving between the tags and see that the new record is saved in the last position and is not the desired position. Can you fix this? screenshoot

Hi
sometimes (sometimes it happens, sometimes not) I click on the input type=text, the label became "active" but the input field isn't active (I can't directly type on it)
In other words the border-bottom stays grey

(i'm on chrome 47.0.2526.106 m / win7)

Is there a reason that when you (press tab?) you use: $input.val(''): and when you use "click", you use: typeahead('val', '')?

I used an autocomplete to create tags and when I (pressed tab?) the behavior was different from the click.

The solution was to use typeahead('val', '') for both cases.

When some letter has been inputted on smart device, the input field of materialize-tags stays narrow.
I confirmed this issue on the iOS Safari and Chrome for iOS.

Hello there,

Thank you for your awesome plugin...

i'm using it in two situations...

First, for an input where i don't need freeinput with objects, everything work perfectly.

Second, i use this plugin to autocomplete with tag objects, and let user create a new tag if it's not present in the suggestion list.

My problem (appears only on mobile device) is when i enter text for a tag (ex: "res" for "restaurant"), the tag shows in the list, but if i click on the suggestion (to quick select 'restaurant'), the event.item (logged with on beforeItemAdd) is only "res"...

It seems that the event triggers first the text value entered before the suggestion choice, so the suggestion choice is not triggered...

How do you handle this ?

Many thanks,

Did you add custom templates support as in original Twitter typeahead.js?
In your demo it's not shown.

If not realized, can you add it, please?

Thank you.

i have just used this tags plugin with yii framwork and i have found that when i set the maxTags to 1 or 2 tags ,the tags are displaying fine but the input field value remain blank i am not able to store it in database help?

I'm trying to limit user input to a fix list of tags with autocomplete. If the user presses enter I want the top suggestion to be added to the list.

The behaviour I'm currently seeing is that when freeInput is disabled and a partial match for a tag is entered followed by the complete key stroke. The focus is shifted to the next field in the form rather than than adding the top suggestion that matches.

I've attempted to configure typeahead with this library using minLength: 0, as per twitter/typeahead.js#719. The default tag list is not shown on focus. I've not been able to overwrite the $('#tag').focus() events to trigger the typeahead to open when using this library.

how do I set tags after $(document).ready()

Please I need an urgent reply

Add support for styling (e.g. Chips with images)

Hello,

Can i use different source in one input field materialize tags ? i have tried,

$('#tag-wrapper').click(function(e) {
    if (count == 0) {
      $('#tag-input').materialtags({
        itemValue: 'id',
        itemText: 'name',
        typeaheadjs: {
          name: 'maintag',
          displayKey: 'name',
          source: maintag.ttAdapter()
        },
       freeInput: false
      });
    }else {
      $('#tag-input').materialtags({
        itemValue: 'id',
        itemText: 'name',
        typeaheadjs: {
          name: 'maintag',
          displayKey: 'name',
          source: nonmaintag.ttAdapter()
        },
       freeInput: false
      });
    }
  })

but the materialize tags still call first condition.

Hello @henrychavez,

Sorry to disturb again ! Could you please create an account there :

• https://travis-ci.org/
• https://gemnasium.com/

Can't do it by myself, I'm not the repo admin

100% Free and it will be useful for me to set up CI tools ;) Thanks buddy !

I'd like to use data from multiple data sources similar to the example from typeahead.js Is this possible? I've tried a few options, but without success and didn't see an example in the docs.

I am trying to initialize it after I get data from the server(ajax) or in jQuerys ready function, but it only works when I write it outside of every function.
And I want to update the value(and the tags) but it only works when I fill it in static oder manually