henrychavez / materialize-tags Goto Github PK
View Code? Open in Web Editor NEWA jQuery tags input plugin based on Materialize
Home Page: http://henrychavez.github.io/materialize-tags/
License: MIT License
A jQuery tags input plugin based on Materialize
Home Page: http://henrychavez.github.io/materialize-tags/
License: MIT License
Hi, materialize tags have this bug too
https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/236
but the @xplicit afterSelect solution doesn't work
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?
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
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 ?
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,
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.
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
});
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.
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?
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.
According to subject.
input some letter in input field.
loose focus from input field by clicking other place.
inputted text changes to tag, and stays input field, too...
Using the code below I am still able to add more than 1 tag. Is maxTags supported?
$('#material-input').materialtags({
maxTags: 1
});
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.
typeahead
when it should read typeaheadjs
Both issues are detailed in this StackOverflow answer
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,
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
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
Add support for styling (e.g. Chips with images)
Hello @henrychavez,
Sorry to disturb again ! Could you please create an account there :
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 !
Would be awesome! :)
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
how do I set tags after $(document).ready()
Please I need an urgent reply
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;
}
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.
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?
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
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
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.
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?
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.