mirror of
https://github.com/wahyd4/jQuery-Tags-Input.git
synced 2026-08-09 04:46:44 +10:00
84 lines
2.4 KiB
HTML
84 lines
2.4 KiB
HTML
|
|
<link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
|
|
<script type="text/javascript" src="jquery.tagsinput.js"></script>
|
|
|
|
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
|
|
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" />
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
function onAddTag(tag) {
|
|
console.log("Added a tag: " + tag);
|
|
}
|
|
function onRemoveTag(tag) {
|
|
console.log("Removed a tag: " + tag);
|
|
}
|
|
|
|
function onChangeTag(input,tag) {
|
|
console.log("Changed a tag: " + tag);
|
|
}
|
|
|
|
function validateTag(tag) {
|
|
console.log("Validating tag " + tag);
|
|
return true;
|
|
|
|
}
|
|
|
|
function onError(msg) {
|
|
console.log(msg);
|
|
}
|
|
|
|
$(function() {
|
|
|
|
// $('.tags').tagsInput({validateTag: validateTag,,onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});
|
|
|
|
|
|
|
|
|
|
$('.tags').tagsInput({
|
|
onError: onError,
|
|
autocomplete: {source: ['a','alpha']}
|
|
});;
|
|
/*
|
|
$('#tags_2').tagsInput({
|
|
width: 'auto',
|
|
onChange: function(elem, elem_tags)
|
|
{
|
|
var languages = ['php','ruby','javascript'];
|
|
$('.tag', elem_tags).each(function()
|
|
{
|
|
if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
|
|
$(this).css('background-color', 'yellow');
|
|
});
|
|
}
|
|
});
|
|
$('#tags_3').tagsInput({
|
|
width: 'auto',
|
|
autocomplete: {source: 'test/fake_json_endpoint.html'}
|
|
// autocomplete: {source: [{label:'Alpha',value:'1'},{label:'Beta',value:'x'}] }
|
|
});
|
|
|
|
*/
|
|
|
|
|
|
// Uncomment this line to see the callback functions in action
|
|
// $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});
|
|
|
|
// Uncomment this line to see an input with no interface for adding new tags.
|
|
// $('input.tags').tagsInput({interactive:false});
|
|
});
|
|
|
|
</script>
|
|
<form>
|
|
<p><label>Defaults:</label>
|
|
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
|
|
|
|
<p><label>Technologies: (Programming languages in yellow)</label>
|
|
<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>
|
|
|
|
<p><label>Autocomplete:</label>
|
|
<input id='tags_3' type='text' class='tags' /></p>
|
|
|
|
</form> |