jQuery-TaggingTools/demo.html at master · dasgib/jQuery-TaggingTools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tagging tools</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="src/jquery.tagbox.css">
</head>
<body>
    <h1>Tagger Demo</h1>
    <form method="post">
        <fieldset>
        <h2>1. A simple tagbox</h2>

        <pre><code>$(".tagbox").tagbox();</code></pre>
        <input class="tagger" name="one" value="three word tag  ,   Are, tags, pretty, awsome, stuff, jQuery, JavaScript & friends">

        <h2>2. A tag box, with tags delimited by spaces</h2>
        <pre><code>$(".tagbox").tagbox({
    delimit_by_space: true
});</code></pre>
        <input class="space_tagger" name="two" value="these are tags   delimited with spaces">

        <h2>3. Hooked up with jQuery UI autocomplete </h2>
        <pre><code>$(".tagbox").tagbox()
    .find(".input input")
    .autocomplete();</code></pre>
        <input class="tagger" name="three" value="hello">
        </fieldset>
        <input type="submit">
    </form>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
        <script src="src/jquery.autoGrowInput.js"></script>
        <script src="src/jquery.tagBox.js"></script>
        <script>

        // The tagbox plugin
        $(".tagger").tagBox();

        $(".space_tagger").tagBox({
            delimit_by_space : true
        });

        // The autocomplete for the last tagbox
        $(".tagbox:last .input input").autocomplete({
            source: function(req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp( "^" + re, "i" );
                var a = $.grep( wordlist, function(item,index){
                    return matcher.test(item);
                });
                responseFn( a );
            },
            minLength: 2,
            select: function(e, ui) {
                e.preventDefault();
                if(e.keyCode != 13) {
                    $(this).val(ui.item.value);
                    $(this).trigger("selectTag");
                }
            }
        });

        // I've hacked the jQuery UI autocomplete render function
        // to highlight part of the matched string
        $.ui.autocomplete.prototype._renderItem = function( ul, item) {
            var re = new RegExp("^" + this.term, "i") ;
            var t = item.label.replace(re,"<strong>" + this.term + "</strong>");
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + t + "</a>" )
                .appendTo( ul );
        };

        // Some sample WORDS for autocomplete to use
        var wordlist = [
                  'January', 'February', 'March', 'April', 'May', 'June',
                  'July', 'August', 'September', 'October', 'November',
                  'December', 'Yammer', 'Yaw', 'Yawn', 'Auspiscious',
                  'Arbitrage', 'Arbiter', 'Arbor', 'Ardor', 'Ardent',
                  'Concrete', 'Conscious', 'Uptight', 'Uplevel', 'Friend',
                  'Depend', 'Deepend', 'Deepen', 'Decommit', 'Right', 'Now',
                  'Knowledge', 'Knight', 'Know', 'Knickers', 'Wow', 'Holy',
                  'Velocity', 'Rational', 'Quiet', 'Quick', 'Quite', 'Quotient',
                  'Wait', "Wither", "Whither", "Indignant", 'Jingle', 'Bells',
                  'Snow', 'Sled', 'Dinner', 'Open', 'Fancy', 'Farsighted',
                  'Farther', 'Giant', 'Ginormous', 'Giggle', 'License',
                  'Follow', 'Foil', 'Foe', 'Swing', 'Sweater', 'Sweetheart',
                  'Terrarium', 'Corn', 'Coal', 'Colocate', 'Coil', 'Likeness',
                  'Jail', 'Chill', 'Last', 'Holiday', 'House', 'Chip', 'Grain',
                  'Grand', 'Creek', 'Crumple', 'Crash', 'Crunch', 'Challenge',
                  'Patience', 'Wisdom', 'Creak', 'Point', 'Warmth',
                  'Imaginative', 'Imagine', 'Imaginative', 'Smokes', 'Calumny',
                  'Call', 'California', 'Can', 'Cat', 'Petition','Pelt',
                  'Random', 'Delicious', 'Cartwheel', 'Venetian', 'Lake',
                  'Work', 'Music', 'Trumpet', 'Arbitrary', 'Distance',
                  'Geography', 'Wrapper', 'Wren', 'Wrestle', 'Trestle', 'Treat',
                  'Trick', 'Trip', 'Trying', 'Opine', 'Father', 'Fallacious',
                  'Fallacy', 'Falling', 'Rain', 'Blue', 'Safe', 'Utility',
                  'Carpet', 'Imitate', 'Immigrant', 'Immigrate', 'Grate',
                  'Great', 'Snip', 'Sniff', 'Snoot', 'Swat', 'Hoot', 'Gig',
                  'Angel', 'Angina', 'Chocolate', 'Chick', 'Check', 'Chock',
                  'Chaff', 'Delist', 'Delightful', 'Delete', 'Jam', 'Debt',
                  'Set', 'Sex', 'Serrated', 'Realistic', 'Relative', 'Redo',
                  'Renege', 'Real', 'Regret', 'Tip', 'Tick', 'Tin',
                  'Tickle','Rip', 'Ride','Cull', 'Culinary',
                  'Caulk','Knee','Potato', 'Potential','Pore','Poor','Pie',
                  'Pickle', 'Piquant','Puppy' , 'Pump', 'Putrid', 'Power',
                  'Punt','Peck','Pester', 'Pert', 'Few', 'Febrile',
                  'Fickle','Fin', 'Fine', 'Fit','Baby', 'Barista',
                  'Bark','Bail', 'Backboard', 'Basil', 'Hello', 'Helium',
                  'Heckle', 'Hence', 'Low', 'Love', 'Long', 'Locked', 'Woe',
                  'Wombat','Worsted','Pants', 'Paint', 'Patent','Palpable',
                  'Conical', 'Tongue', 'Tarriff', 'Tax', 'Tange',
                  'Tahoma','Curve','Curt','Ceiling', 'Conundrum', 'Coffee',
                  'Haberdasher', 'Teamwork', 'Eritrea', 'Erudition', 'Titanium',
                  'Prepare', 'Predisposed', 'Pretend', 'Twang', 'Tweak',
                  'Polite', 'Dahlia', 'Dancing', 'Daft', 'Rope', 'Rodent',
                  'Luck', 'Luke','Rutabaga','Ruckus', 'Rubber','Woot','Frank',
                  'Aspire', 'Asinine', 'Aspersion','Attire', 'Attentive',
                  'Attract','Fracture','Whammy','Whether','Wick','Sophomoric',
                  'Socialist', 'Sonorous', 'Sound', 'Snarl','Street', 'Strict',
                  'Stammer', 'Stick', 'Stay', 'Stumped', 'Stew', 'Shut', 'Ship',
                  'Shush', 'Shapely', 'Shudder', 'Shambles', 'Sample', 'Samuel',
                  'Same', 'Trust', 'Grapple', 'Grin', 'Ski', 'Skip', 'Scuttle',
                  'Scrape','Skiff', 'Scamper', 'Science', 'Silence', 'Silo',
                  'Silt', 'Silky', 'Smooth', 'Smother', 'Special', 'Sputter',
                  'Split', 'Spline', 'Spin', 'Smile','Stiff','Stack','Stuck',
                  'Torque', 'Tone', 'Ton', 'Tornado', 'Hurricane', 'Hurry',
                  'Helpful','Weigh', 'Went', 'Weather', 'Wet', 'Sophia',
                  'Write','Wrought', 'Gift', 'Lick', 'List','Fraud', 'Viper',
                  'Vine', 'Vindicated', 'Voice', 'Vouch', 'Pound', 'Pouch',
                  'Through', 'Thickness', 'Thought', 'Thorough', 'Thrift',
                  'Though', 'Thanks', 'Thud', 'Tanks', 'Tingle', 'Tiny',
                  'Tents', 'Affirmed', 'Afterwards', 'Affair', 'Affront',
                  'Front', 'Back', 'Ballast', 'Frame', 'Tug', 'Tussle',
                  'Torrent', 'Together', 'Switch', 'Wedge', 'Rent', 'Insipid',
                  'Inside', 'Indoors', 'Infinite', 'Indecent', 'Decent',
                  'Into', 'Enter', 'Ensure', 'Insure', 'Endowed', 'Enthralled',
                  'Encourage', 'Cuff', 'Whiz', 'Wizard', 'Bullet', 'Bulwark',
                  'Bull', 'Billet', 'Blame', 'Blimp', 'Boil', 'Boneyard',
                  'Ballistic', 'Bonsai', 'Rote', 'Hone','Dote', 'Door',
                  'Dorothy', 'Donor', 'Dry', 'Drip', 'Drain', 'Dross',
                  'Cross', 'Crisp', 'Drafty', 'Pull', 'Deny', 'Donate',
                  'Drift', 'Dip', 'Educate', 'Editor', 'Elucidate', 'Elapsed',
                  'Erase', 'Erode', 'Cede', 'Cetacean','Frigid', 'Pleasure',
                  'Plow', 'Plumb', 'Jump', 'Julian', 'Joke', 'Jocular',
                  'Jovian', 'Jordan', 'River', 'Arrest', 'Arrive', 'Riven'
              ].sort();


    </script>
</body>
</html>