| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | |
| A | 2 | <link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" /> |
| 3 | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> | |
| 4 | <script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script> | |
| 5 | <!-- To test using the original jQuery.autocomplete, uncomment the following --> | |
| 6 | <!-- | |
| 7 | <script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script> | |
| 8 | <link rel="stylesheet" type="text/css" href="http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.css" /> | |
| 9 | --> | |
| 10 | <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script> | |
| 11 | <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" /> | |
| 12 | ||
| 13 | ||
| 14 | <script type="text/javascript"> | |
| 15 | ||
| 16 | function onAddTag(tag) { | |
| 17 | alert("Added a tag: " + tag); | |
| 18 | } | |
| 19 | function onRemoveTag(tag) { | |
| 20 | alert("Removed a tag: " + tag); | |
| 21 | } | |
| 22 | ||
| 23 | function onChangeTag(input,tag) { | |
| 24 | alert("Changed a tag: " + tag); | |
| 25 | } | |
| 26 | ||
| 27 | $(function() { | |
| 28 | ||
| 29 | $('#tags_1').tagsInput({width:'auto'}); | |
| 30 | $('#tags_2').tagsInput({ | |
| 31 | width: 'auto', | |
| 32 | onChange: function(elem, elem_tags) | |
| 33 | { | |
| 34 | var languages = ['php','ruby','javascript']; | |
| 35 | $('.tag', elem_tags).each(function() | |
| 36 | { | |
| 37 | if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0) | |
| 38 | $(this).css('background-color', 'yellow'); | |
| 39 | }); | |
| 40 | } | |
| 41 | }); | |
| 42 | $('#tags_3').tagsInput({ | |
| 43 | width: 'auto', | |
| 44 | ||
| 45 | //autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui) | |
| 46 | autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint | |
| 47 | }); | |
| 48 | ||
| 49 | ||
| 50 | // Uncomment this line to see the callback functions in action | |
| 51 | // $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag}); | |
| 52 | ||
| 53 | // Uncomment this line to see an input with no interface for adding new tags. | |
| 54 | // $('input.tags').tagsInput({interactive:false}); | |
| 55 | }); | |
| 56 | ||
| 57 | </script> | |
| 58 | <form> | |
| 59 | <p><label>Defaults:</label> | |
| 60 | <input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p> | |
| 61 | ||
| 62 | <p><label>Technologies: (Programming languages in yellow)</label> | |
| 63 | <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p> | |
| 64 | ||
| 65 | <p><label>Autocomplete:</label> | |
| 66 | <input id='tags_3' type='text' class='tags'></p> | |
| 67 | ||
| 68 | </form> | |
