1

私は先輩の一人によって以前に変更されたcombox.uiに取り組んでいます。彼は私たちのプロジェクトのニーズに応じてjsファイルを変更しましたが、誰かがドロップダウンに焦点を合わせたときはいつでも--Select--をリストから削除してオートコンプリート検索を開始し、フォーカスがドロップダウンまたは入力から外れたときはいつでも--Select--その場所に追加されます。どこが間違っているのか、この関数をどこに書くべきか教えてください。このプラグインコードのどこにこの関数を書くべきかわかりません。

(function ($) {
$.widget("ui.combobox", {
    options: {
        maxOptionSize: 20,
        maxOptionText: "... type to filter"
    },
    _create: function () {
        var self = this,
            select = this.element.hide(),
            selected = select.children(":selected"),
            maxOptionValue = select.children().eq(0).val(),
            value = selected.val() ? selected.text() : "";

        select.wrap("<div style='float:left;'></div>");

        var width = $(select).width();
        if (width == 0)
            width = 100;

        if (this.element.attr('disabled') == 'disabled') {/*To handle disabled case */
            input = this.input = $("<input type='textbox'>").addClass("textbox").attr("disabled", "disabled").insertAfter(select).val(value).attr("title", value);
            return; /*Do not render autocomplete*/
        }
        var input = this.input = $("<input>").insertAfter(select).val(value).attr("title", value).autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                var select_el = select.get(0); // get dom element
                var rep = new Array(); // response array
                input.data("autocomplete").showMaxOption = false;
                // simple loop for the options
                for (var i = 0; i < select_el.length; i++) {
                    var text = select_el.options[i].text;
                    // add element to result array
                    if (select_el.options[i].value && (!request.term || matcher.test(text))) {
                        rep.push({
                            label: text, //.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                            value: text,
                            option: select_el.options[i],
                            number: i + 1
                        });
                    }
                    if (rep.length == self.options.maxOptionSize) {
                        input.data("autocomplete").showMaxOption = true;
                        input.data("autocomplete").maxOptionText = self.options.maxOptionText;
                        break;
                    }
                }
                // send response
                response(rep);
            },
            select: function (event, ui) {

                if (ui.item.value == maxOptionValue) {
                    input.data("autocomplete").term = "";
                    var selValue = select.find("option:selected").text();
                    $(this).val(selValue).attr("title", selValue);

                    return false;
                } else {
                    ui.item.option.selected = true;
                    self._trigger("selected", event, {
                        item: ui.item.option
                    });
                }
            },
            focus: function (event, ui) {

                if (ui.item.value == maxOptionValue) {
                    return false;
                }
            },
            change: function (event, ui) {

                if (!ui.item) {
                    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                        valid = false;
                    select.children("option").each(function () {
                        if ($(this).text().match(matcher)) {
                            this.selected = valid = true;
                            select.change();
                            return false;
                        }
                    });
                    if (!valid) {
                        input.data("autocomplete").term = "";
                        var selValue = select.find("option:selected").text();
                        $(this).val(selValue).attr("title", selValue);
                        return false;
                    }
                } else {
                    var selValue = select.find("option:selected").text();
                    $(this).attr("title", selValue);
                }
            },
            close: function (event, ui) {
                if (event.originalEvent && event.originalEvent.type === "menuselected") {
                    $(select).change();
                }
            }
        }).addClass("ui-widget ui-widget-content ui-corner-left").width(width);

        input.data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
        };

        this.button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show Items").insertAfter(input).button({
            icons: {
                primary: "ui-icon-triangle-1-s"
            },
            text: false
        }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function () {
            // close if already visible                
            if (input.autocomplete("widget").is(":visible")) {
                input.autocomplete("close");
                return;
            }

            // work around a bug (likely same cause as #5265)
            $(this).blur();

            // pass empty string as value to search for, displaying all results
            input.autocomplete("search", "");
            input.focus();
        });

        var iw = input.outerWidth(true);
        var bw = this.button.outerWidth(true);
        select.parent().width(iw + bw + 1);
    },
    destroy: function () {
        this.input.remove();
        this.button.remove();
        this.element.show();
        $.Widget.prototype.destroy.call(this);
    }
});
})(jQuery);
(function ($) {
$.extend($.ui.autocomplete.prototype, {
    _renderMenu: function (ul, items) {
        var self = this;
        $.each(items, function (index, item) {
            if (index < items.length)
                self._renderItem(ul, item);
        });
        if (self.element.data("autocomplete").showMaxOption) {
            ul.append("<li class='ui-autocomplete-max-option'>" +       self.element.data("autocomplete").maxOptionText + "</li>");
        }
    }
});
})(jQuery);
4

2 に答える 2

2

これがあなたが求めていたものだと思います。--SELECT--はフォーカスで削除され、ブラーで追加されます。

http://jsfiddle.net/nickaknudson/fsRn4/

アップデート:

フォーカスに検索を表示し、別のオプションが選択されていない場合にのみ--SELECT--を追加します。

http://jsfiddle.net/nickaknudson/fsRn4/4/

資力:

于 2012-08-07T15:57:01.753 に答える
2

入力のonfocus()イベント内に追加するだけ$(input).autocomplete('search','');で、入力がフォーカスされているときはいつでもコンボボックスが開きます。ニックのフィドルに基づいて、それは次のようになりますinput.focus(function(event) { $(this).val(''); $(input).autocomplete('search',''); });

実例は次のとおりです:http://jsfiddle.net/fsRn4/3/

于 2012-08-08T06:57:50.210 に答える