3

我正在使用带有自动完成功能的 jQuery tagit。我希望这样当用户点击输入时，如果他们没有选择任何自动完成建议，它将根据输入的内容创建一个标签。如果他们确实按下并选择其中一个选项，我希望它使用该值来创建标签。

我遇到的问题是，当按下 Enter 按钮时，它会覆盖自动完成中的 Select 函数，导致它根据输入的内容创建标签，而不是选择的内容。

以下是稍微修改的 tagit 小部件的片段

// 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');
                }
            }
4

0 回答 0