1

Combobox jQuery Autocomplete Demoの Combobox autocomplete demo に基づく html ページがあります。問題は、コンボボックスが FireFox 13.x で完全にレンダリングされることです。ただし、IE 9.x (64 ビット) では、オートコンプリート部分は正しく実行されますが、このリンクで確認できるように外観が奇妙です: Strange jQuery Combobox Appearance in IE 9.x。jQuery は完璧なクロスブラウザー テクノロジだと思っていましたが、そうではないようです。または、html コードに何か不足している可能性がありますか? 完全な html コードは以下のとおりです。

        <html>
        <head>
        <meta charset="utf-8">
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
        <style>
        .ui-combobox {
            position: relative;
            display: inline-block;
        }
        .ui-combobox-toggle {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
            /* adjust styles for IE 6/7 */
            *height: 1.7em;
            *top: 0.1em;
        }
        .ui-combobox-input {
            margin: 0;
            padding: 0.3em;
        }
        </style>
        <script type="text/javascript">
            (function ($) {
                $.widget("ui.combobox", {
                    _create: function () {
                        var input,
                        self = this,
                        select = this.element.hide(),
                        selected = select.children(":selected"),
                        value = selected.val() ? selected.text() : "",
                        wrapper = this.wrapper = $("<span>")
                            .addClass("ui-combobox")
                            .insertAfter(select);

                        input = $("<input>")
                        .appendTo(wrapper)
                        .val(value)
                        .addClass("ui-state-default ui-combobox-input")
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: function (request, response) {
                                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                                response(select.children("option").map(function () {
                                    var text = $(this).text();
                                    if (this.value && (!request.term || matcher.test(text)))
                                        return {
                                            label: text.replace(
                                                new RegExp(
                                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                                    $.ui.autocomplete.escapeRegex(request.term) +
                                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                ), "<strong>$1</strong>"),
                                            value: text,
                                            option: this
                                        };
                                }));
                            },
                            select: function (event, ui) {
                                ui.item.option.selected = true;
                                self._trigger("selected", event, {
                                    item: ui.item.option
                                });
                            },
                            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;
                                            return false;
                                        }
                                    });
                                    if (!valid) {
                                        // remove invalid value, as it didn't match anything
                                        $(this).val("");
                                        select.val("");
                                        input.data("autocomplete").term = "";
                                        return false;
                                    }
                                }
                            }
                        })
                        .addClass("ui-widget ui-widget-content ui-corner-left");

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

                        $("<a>")
                        .attr("tabIndex", -1)
                        .attr("title", "Show All Items")
                        .appendTo(wrapper)
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                        .removeClass("ui-corner-all")
                        .addClass("ui-corner-right ui-combobox-toggle")
                        .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();
                        });
                    },

                    destroy: function () {
                        this.wrapper.remove();
                        this.element.show();
                        $.Widget.prototype.destroy.call(this);
                    }
                });
            })(jQuery);

            $(function () {
                $("#combobox").combobox();
                $("#toggle").click(function () {
                    $("#combobox").toggle();
                });
            });
        </script>
    </head>
    <body>
        <div class="demo">
            <div class="ui-widget">
                <label>
                    Your preferred programming language:
                </label>
                <select id="combobox">
                    <option value="">Select one...</option>
                    <option value="ActionScript">ActionScript</option>
                    <option value="AppleScript">AppleScript</option>
                    <option value="Asp">Asp</option>
                    <option value="BASIC">BASIC</option>
                    <option value="C">C</option>
                    <option value="C++">C++</option>
                    <option value="Clojure">Clojure</option>
                    <option value="COBOL">COBOL</option>
                    <option value="ColdFusion">ColdFusion</option>
                    <option value="Erlang">Erlang</option>
                    <option value="Fortran">Fortran</option>
                    <option value="Groovy">Groovy</option>
                    <option value="Haskell">Haskell</option>
                    <option value="Java">Java</option>
                    <option value="JavaScript">JavaScript</option>
                    <option value="Lisp">Lisp</option>
                    <option value="Perl">Perl</option>
                    <option value="PHP">PHP</option>
                    <option value="Python">Python</option>
                    <option value="Ruby">Ruby</option>
                    <option value="Scala">Scala</option>
                    <option value="Scheme">Scheme</option>
                </select>
            </div>
            <button id="toggle">
                Show underlying select</button>
        </div>
        <!-- End demo -->
    </body>
    </html>
4

1 に答える 1

1

IE で不適切なレンダリングを引き起こしている問題を発見しました。IE で適切にレンダリングするには、jQuery を使用するときに、次のコードのようにドキュメント タイプを指定する必要があります。これにより、jQuery コンボボックスが IE で適切にレンダリングされます。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

別の方法として、上記のコード サンプルで説明したローカル URL ではなく、次の Web URL を使用して、この例の jQuery に関連する CSS とスクリプトを取得することもできます。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui
                 /1.8/themes/cupertino/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2
                 /jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-
                ui.min.js" type="text/javascript"></script>
于 2012-07-05T17:29:21.287 に答える