3

オートコンプリートで jQuery tagit を使用しています。ユーザーが入力したときに、オートコンプリートの提案を選択しない場合、入力されたものからタグが作成されるようにしたいと思います。キーを押してオプションの 1 つを選択した場合は、代わりにその値を使用してタグを作成したいと思います。

私が抱えている問題は、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