3

I'm using jQuery tagit with Autocomplete. I would like it so that when the user hits enter it will create a tag out of what's been entered if they don't select any of the autocomplete suggestions. If they do key down and select one of the options I would like it to use that value to create the tag instead.

The problem I'm having is when the Enter button is hit it overrides the Select function in autocomplete causing it to create a tag out of what's been typed, not what's been selected.

Here are the snippets from the slightly modified tagit widget

// Autocomplete.
        if (this.options.availableTags || this.options.tagSource) {
            this._tagInput.autocomplete({
                source: this.options.tagSource,
                focus: function(event, ui) {
                        //$(this).val(ui.item.label);
                        return false;
                      },
                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.label,'',ui.item.value); 
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                }
            }).data("autocomplete")._renderItem = function( ul, item ) {
                    var job ="";
                    if (item.job) job = item.job;
                    var row = "<a><span class='searchnamedisplay'>" + item.label + " </span><span class='searchjobdisplay'>"+job+"</span><span class='searchnamedisplay' style='width:120px;font-style:italic;color:#A19D9D;'>" + item.specialty + "</span><img src='/images/profile/"+item.value+".jpg' alt='person' width='25' height='25' border='0' style='padding-left:8px;padding-top:2px;'  onerror='this.style.display=\"none\"' /><div style='clear:both'/></a>";
                    return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( row )
                    .appendTo( ul );
                    };
        }

        // Events.
        this._tagInput
            .keydown(function(event) {
                // Backspace is not detected within a keypress, so it must use keydown.
                if (event.which == $.ui.keyCode.BACKSPACE && that._tagInput.val() === '') {
                    var tag = that._lastTag();
                    if (!that.options.removeConfirmation || tag.hasClass('remove')) {
                        // When backspace is pressed, the last tag is deleted.
                        that.removeTag(tag);
                    } else if (that.options.removeConfirmation) {
                        tag.addClass('remove ui-state-highlight');
                    }
                } else if (that.options.removeConfirmation) {
                    that._lastTag().removeClass('remove ui-state-highlight');
                }

                // Comma/Space/Enter are all valid delimiters for new tags,
                // except when there is an open quote or if setting allowSpaces = true.
                // Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
                if (
                    event.which == $.ui.keyCode.COMMA ||
                    event.which == $.ui.keyCode.ENTER ||
                    (
                        event.which == $.ui.keyCode.TAB &&
                        that._tagInput.val() !== ''
                    ) ||
                    (
                        event.which == $.ui.keyCode.SPACE &&
                        that.options.allowSpaces !== true &&
                        (
                            $.trim(that._tagInput.val()).replace( /^s*/, '' ).charAt(0) != '"' ||
                            (
                                $.trim(that._tagInput.val()).charAt(0) == '"' &&
                                $.trim(that._tagInput.val()).charAt($.trim(that._tagInput.val()).length - 1) == '"' &&
                                $.trim(that._tagInput.val()).length - 1 !== 0
                            )
                        )
                    )
                ) {
                    event.preventDefault();
                    that.createTag(that._cleanedInput());

                    // The autocomplete doesn't close automatically when TAB is pressed.
                    // So let's ensure that it closes.
                    that._tagInput.autocomplete('close');
                }
            }
user2052491
  • 113
  • 1
  • 1
  • 8

0 Answers0