Skip to content
Browse files

Fixed original bug which creates garbage tag when autocomplete is use…

…d; Added option to set header for autocomplete list; Replaced tabs with spaces;
  • Loading branch information...
1 parent 90bcd8d commit 6ae73a59fc1b1855672ebef758ae338a5503c008 @grisevg grisevg committed Aug 24, 2011
Showing with 82 additions and 49 deletions.
  1. +25 −17 css/jquery.tagit.css
  2. +11 −8 examples.html
  3. +46 −24 js/tag-it.js
View
42 css/jquery.tagit.css
@@ -1,29 +1,29 @@
ul.tagit {
- padding: 1px 5px;
- overflow: auto;
+ padding: 1px 5px;
+ overflow: auto;
margin-left: inherit; /* usually we don't want the regular ul margins. */
margin-right: inherit;
}
ul.tagit li {
- display: block;
- float: left;
- margin: 2px 5px 2px 0;
+ display: block;
+ float: left;
+ margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice {
- padding: .2em 18px .2em .5em;
+ padding: .2em 18px .2em .5em;
position: relative;
line-height: inherit;
}
ul.tagit li.tagit-new {
- padding: .25em 4px .25em 0;
+ padding: .25em 4px .25em 0;
}
ul.tagit li.tagit-choice a.tagit-label {
- cursor: pointer;
- text-decoration: none;
+ cursor: pointer;
+ text-decoration: none;
}
ul.tagit li.tagit-choice .close {
- cursor: pointer;
+ cursor: pointer;
position: absolute;
right: .1em;
top: 50%;
@@ -36,19 +36,27 @@ ul.tagit li.tagit-choice .close .text-icon {
}
ul.tagit li.tagit-choice input {
- display: block;
- float: left;
- margin: 2px 5px 2px 0;
+ display: block;
+ float: left;
+ margin: 2px 5px 2px 0;
}
ul.tagit input[type="text"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: none;
- margin: 0;
- padding: 0;
- width: inherit;
- background-color: inherit;
+ margin: 0;
+ padding: 0;
+ width: inherit;
+ background-color: inherit;
outline: none;
}
+
+/*Autocomplete header text*/
+li.ui-autocomplete-header {
+ font-weight: bold;
+ padding: .2em .4em;
+ margin: .8em 0 .2em;
+ line-height: 1.5;
+}
View
19 examples.html
@@ -21,7 +21,7 @@
<link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
<!-- jQuery and jQuery UI are required dependencies. -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<!-- The real deal -->
@@ -105,15 +105,16 @@
availableTags: sampleTags,
removeConfirmation: true
});
-
- //-------------------------------
+
+ //-------------------------------
// Full Autocomplete
//-------------------------------
$('#autocompleteTags').tagit({
availableTags: sampleTags,
showAllOnFocus: true,
- delay: 0,
- minLength: 0
+ delay: 0,
+ minLength: 0,
+ autocompleteHeader: 'Suggestions are:'
});
});
@@ -135,7 +136,7 @@
<div id="content">
<p>These demo various features of Tag-it. View the source to see how each works.</p>
- <p>To see Autocomplete in action use any of this tags: 'c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'</p>
+ <p>To see Autocomplete in action use any of this tags: 'c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'</p>
<hr>
<h3>Minimal</h3>
<form>
@@ -231,10 +232,12 @@
</form>
<hr>
- <h3>Show Autocomplete on focus</h3>
+ <h3>Autocomplete options</h3>
<form>
<p>
- Sometimes it's usefull to show all available tags for autocomplete. This can be set with showAllOnFocus. Additionaly autocomplete can be tuned with delay and minLength attributes (same as in jQuery UI Autocomplete).
+ Sometimes it's usefull to show all available tags for autocomplete, this can be set with showAllOnFocus.
+ Additionaly autocomplete can be tuned with delay and minLength attributes (same as in jQuery UI Autocomplete).
+ To set header text for autocomplete list, user autocompleteHeader attribute.
</p>
<ul id="autocompleteTags"></ul>
<input type="submit" value="Submit">
View
70 js/tag-it.js
@@ -34,6 +34,7 @@
caseSensitive : true,
// Autocomplete settings
+ autocompleteHeader : null,
availableTags : [],
tagSource : null,
minLength : 1,
@@ -106,15 +107,18 @@
this._tagInput.attr('tabindex', this.options.tabIndex);
}
- this.options.tagSource = this.options.tagSource || function(search, showChoices) {
- var filter = search.term.toLowerCase();
- var choices = $.grep(that.options.availableTags, function(element) {
- // Only match autocomplete options that begin with the search term.
- // (Case insensitive.)
- return (element.toLowerCase().indexOf(filter) === 0);
- });
- showChoices(that._subtractArray(choices, that.assignedTags()));
- };
+ if (!this.options.tagSource && this.options.availableTags) {
+ this.options.tagSource = function(search, showChoices) {
+ var filter = search.term.toLowerCase();
+ var choices = $.grep(that.options.availableTags, function(element) {
+ // Only match autocomplete options that begin with the search term.
+ // (Case insensitive.)
+ return (element.toLowerCase().indexOf(filter) === 0);
+ });
+ showChoices(that._subtractArray(choices, that.assignedTags()));
+ };
+ }
+
this.tagList
.addClass('tagit')
@@ -201,39 +205,57 @@
// The autocomplete doesn't close automatically when TAB is pressed.
// So let's ensure that it closes.
- that._tagInput.autocomplete('close');
+ that._tagInput.tagitAutocomplete('close');
}
}).blur(function(e){
- // Create a tag when the element loses focus (unless it's empty).
- that.createTag(that._cleanedInput());
+ //If autocomplete is enabled and suggestion was clicked, just delete the input, autocomplete will put value itself
+ if (that.options.tagSource && $(that._tagInput).data('autocomplete_list').data('mouseover')) {
+ that._cleanedInput();
+ } else {
+ that.createTag(that._cleanedInput());
+ }
});
// Autocomplete.
- if (this.options.availableTags || this.options.tagSource) {
- this._tagInput.autocomplete({
+ //Extending UI Autocomplete to rewrite how it renders
+ $.widget( "custom.tagitAutocomplete", $.ui.autocomplete, {
+ _renderMenu: function( ul, items ) {
+ //Assign autocomplete list to html element, for it to be accessible in other parts of the code.
+ $(this.element).data('autocomplete_list', ul);
+
+ //We need to store if mouse over autocomplete list to predict if it was clicked when input blured.
+ ul.data('mouseover', false);
+ ul.mouseenter(function(){$(this).data('mouseover', true);});
+ ul.mouseleave(function(){$(this).data('mouseover', false);});
+
+ if (that.options.autocompleteHeader) {
+ ul.prepend("<li class='ui-autocomplete-header'>"+ that.options.autocompleteHeader +"</li>");
+ }
+
+ var self = this;
+ $.each( items, function( index, item ) {
+ self._renderItem( ul, item );
+ });
+ },
+ });
+ if (this.options.tagSource) {
+ this._tagInput.tagitAutocomplete({
source: this.options.tagSource,
minLength: this.options.minLength,
delay: this.options.delay,
+ autofocus: true,
select: function(event, ui) {
- // Delete the last tag if we autocomplete something despite the input being empty
- // This happens because the input's blur event causes the tag to be created when
- // the user clicks an autocomplete item.
- // The only artifact of this is that while the user holds down the mouse button
- // on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
- // and is changed to the autocompleted text upon mouseup.
- if (that._tagInput.val() === '') {
- that.removeTag(that._lastTag(), false);
- }
that.createTag(ui.item.value);
// Preventing the tag input to be updated with the chosen value.
return false;
},
+ appendTo:this.tagList[0],
});
//Show all posibilities on focus
if (this.options.showAllOnFocus) {
this._tagInput.focus(function(event, ui) {
- $(this).autocomplete( "search", '');
+ $(this).tagitAutocomplete( "search", '');
})
}
}

0 comments on commit 6ae73a5

Please sign in to comment.
Something went wrong with that request. Please try again.