Question

我正在使用combox.ui，之前我的一位大四学生改变过了。他根据我们项目的需要改变了js文件。但是现在我需要关注下拉列表 - 选择 - 应该从列表中移除并且自动完成搜索应该开始并且当焦点没有下拉或输入时 - 选择 - 应该在它的位置添加。请告诉我我在哪里做错了，应该写这个函数的位置。我不知道在这个插件代码中写这个函数的位置..

(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);

Answer 1

我认为这就是你所要求的，-SELECT--在焦点上被删除，并加回模糊。

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

<强>更新

在焦点上显示搜索，并且仅在未选择其他选项时添加--SELECT--

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

<强>资源：

Answer 2

只需在输入的onfocus（）事件中添加$(input).autocomplete('search','');，只要输入处于焦点，这将打开组合框。所以基于尼克的小提琴，它就像input.focus(function(event) { $(this).val(''); $(input).autocomplete('search',''); });

以下是工作示例：http://jsfiddle.net/fsRn4/3/

combobox.ui Jquery在焦点上开始自动完成

2 个答案: