0

我需要创建一个小部件,以便通过一些搜索和自动完成来更好地制作普通的选择框。我立即来到这个例子..并看看。

使用最新的jQuery UI,它可以完美运行,但我必须使用jQuery UI 1.8.20版本。

现在我看到this._on@line number : 62,在自定义小部件代码中使用在1.8.20版本的 jquery.ui.widget.js 中不可用。

如何使组合框与旧版本一起使用?

4

2 回答 2

3

以下是您可以如何为 jQuery 1.8.20 调整小部件的方法。我在 jsFiddle 使用1.8.18

(function ($) {
    $.widget("custom.combobox", {
        _create: function () {
            this.wrapper = $("<span>")
                .addClass("custom-combobox")
                .insertAfter(this.element);

            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },

        _createAutocomplete: function () {
            var selected = this.element.children(":selected"),
                value = selected.val() ? selected.text() : "";

            this.input = $("<input>")
                .appendTo(this.wrapper)
                .val(value)
                .attr("title", "")
                .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy(this, "_source")
            })
            /* plugin not present
            .tooltip({
                tooltipClass: "ui-state-highlight"
            })*/
;

            this.input.bind('autocompleteselect', function (event, ui) {
                ui.item.option.selected = true;
                $(this).trigger("select", event, {
                    item: ui.item.option
                });
            });

            this.input.bind('autocompletechange', function (event, ui) {

                // Selected an item, nothing to do
                if (ui.item) {
                    return;
                }

                // Search for a match (case-insensitive)
                var value = this.input.val(),
                    valueLowerCase = value.toLowerCase(),
                    valid = false;
                this.element.children("option").each(function () {
                    if ($(this).text().toLowerCase() === valueLowerCase) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                // Found a match, nothing to do
                if (valid) {
                    return;
                }

                // Remove invalid value
                this.input.val("")
                    .attr("title", value + " didn't match any item")
                /*.tooltip("open")*/;
                this.element.val("");
                this._delay(function () {
                    this.input /*.tooltip("close")*/
                    .attr("title", "");
                }, 2500);
                this.input.data("ui-autocomplete").term = "";
            });

            /* using delegate instead
            this._on( this.input, {
              autocompleteselect: function( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                  item: ui.item.option
                });
              },

              autocompletechange: "_removeIfInvalid"
            });*/
        },

        _createShowAllButton: function () {
            var input = this.input,
                wasOpen = false;

            $("<a>")
                .attr("tabIndex", -1)
                .attr("title", "Show All Items")
            //.tooltip()
            .appendTo(this.wrapper)
                .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
                .removeClass("ui-corner-all")
                .addClass("custom-combobox-toggle ui-corner-right")
                .mousedown(function () {
                wasOpen = input.autocomplete("widget").is(":visible");
            })
                .click(function () {
                input.focus();

                // Close if already visible
                if (wasOpen) {
                    return;
                }

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

        _source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response(this.element.children("option").map(function () {
                var text = $(this).text();
                if (this.value && (!request.term || matcher.test(text))) return {
                    label: text,
                    value: text,
                    option: this
                };
            }));
        },

        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        }
    });
})(jQuery);

$(function () {
    $("#combobox").combobox();
    $("#toggle").click(function () {
        $("#combobox").toggle();
    });
});
于 2013-06-18T17:39:32.597 回答
1

这是一个在 iPad 中工作的 custom.combox,在组合框中显示所有项目时不显示 iPad 键盘。出于我的目的,我需要“可编辑的下拉菜单”功能。我回答的重点是停止显示 iPad 键盘,请参阅我对 iPad hack 的评论。

  (function($) {
            $.widget("custom.combobox", {
                _create: function() {
                    this.wrapper = $("<span>")
                        .addClass("custom-combobox")
                        .insertAfter(this.element);

                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },

                _createAutocomplete: function() {
                    var selected = this.element.children(":selected"),
                        value = selected.val();

                    this.input = $("<input>")
                        .appendTo(this.wrapper)
                        .val(value)
                        .attr("title", "")
                        .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: $.proxy(this, "_source")
                        });
                    //.tooltip({don't display tooltip in ipad, clunky
                    //    tooltipClass: "ui-state-highlight"
                    //});

                    this.input.bind('autocompleteselect', function(event, ui) {
                        if ((/iPhone|iPod|iPad/).test(navigator.userAgent)) {
                            var $input = $(this);
                            setTimeout(function() {
                                $input.removeAttr('readonly'); //release readonly lock on input-end ipad hack
                            }, 2000);
                        }

                        ui.item.option.selected = true;
                        $(this).trigger("select", event, {
                            item: ui.item.option
                        });
                    });

                       this.input.bind('autocompletechange', function (event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
                        valueLowerCase = value.toLowerCase(),
                        valid = false;
                    this.element.children("option").each(function () {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input.val("")
                        .attr("title", value + " didn't match any item")
                    /*.tooltip("open")*/;
                    this.element.val("");
                    this._delay(function () {
                        this.input /*.tooltip("close")*/
                        .attr("title", "");
                    }, 2500);
                    this.input.data("ui-autocomplete").term = "";
                });

                    //this._on(this.input, {
                    //    autocompleteselect: function(event, ui) {
                    //        var $option = $(ui.item.option);
                    //        //var optionType = $option.data('type');

                    //        ui.item.option.selected = true;
                    //        this._trigger("select", event, {
                    //            item: ui.item.option
                    //        });

                    //        //old way of updating Code description and comment, now using KO
                    //        //if (optionType) {
                    //        //    if (optionType === 'option-type-code') {
                    //        //        var prelimId = $option.parents('.options-row').data('id');
                    //        //        var descriptionRow = $('#optionsContainer').find('.options-description-row[data-id="' + prelimId + '"]');
                    //        //        var description = $option.data('description');
                    //        //        var comment = $option.data('comment');
                    //        //        descriptionRow.find('input[data-type="option-description-input"]').val(description);
                    //        //        descriptionRow.find('input[data-type="option-comment-input"]').val(comment);

                    //        //    }
                    //        //}
                    //    },

                    //    //autocompletechange: "_removeIfInvalid"
                    //});
                },

                _createShowAllButton: function() {
                    var input = this.input,
                        wasOpen = false;

                    $("<a>")
                        .attr("tabIndex", -1)
                        .attr("title", "Show All Items")
                        //.tooltip() //don't display tooltip in ipad, clunky
                        .appendTo(this.wrapper)
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                        .removeClass("ui-corner-all")
                        .addClass("custom-combobox-toggle ui-corner-right")
                        .mousedown(function() {
                            wasOpen = input.autocomplete("widget").is(":visible");
                        })
                        .click(function() {
                            if ((/iPhone|iPod|iPad/).test(navigator.userAgent)) {
                                $(input).attr('readonly', 'readonly'); //begin ipad hack to stop keyboard from displaying on combobox select
                            } else {
                                input.focus();
                            }

                            // Close if already visible
                            if (wasOpen) {
                                return;
                            }

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

                _source: function(request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(this.element.children("option").map(function() {
                        var text = $(this).text();
                        var value = $(this).val();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text,
                                value: value,
                                option: this
                            };
                    }));
                },

                _removeIfInvalid: function(event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
                        valueLowerCase = value.toLowerCase(),
                        valid = false;
                    this.element.children("option").each(function() {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input
                        .val("")
                        .attr("title", value + " didn't match any item")
                        .tooltip("open");
                    this.element.val("");
                    this._delay(function() {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.data("ui-autocomplete").term = "";
                },

                _destroy: function() {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })(jQuery);
于 2014-05-09T07:56:57.113 回答