0

編集モードの Ultrawebgrid セルでオートコンプリート ドロップダウン コントロールを使用したいので、ユーザーはデータを入力でき、存在する場合は値が自動的に入力されます。無効なデータは許可されません。これは可能ですか？webcombo は使いたくありません。重すぎて、複数列のドロップダウンは必要ありません。シンプルなドロップダウンリストが必要ですが、ユーザーがGoogleが提案するのと同じように入力できますが、すべての値がクライアントにキャッシュされ、キーストロークごとにサーバーへのラウンドトリップはありません.

コントロールは次のようになります

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx

ありがとう、

RK

4

1 に答える 1

0

私はあなたが望むような何かを達成することができました. これが私がやったことですが、Infragistics パッケージで機能するかどうかはわかりません。

1- JQuery UI 自動入力テキストボックスをダウンロードしました。 2- サイトにあるサンプルを少し変更しました。3-何かを適用して、オートコンプリート用の XYZ という名前のクラスを持つすべてのドロップダウンを変更しました。デリゲートを使用したので、UI でドロップダウンを生成すると、自動入力テキスト ボックスに自動的に置き換えられます。

私の英語が完璧でない場合は申し訳ありませんが、それは私の母国語ではありません。

ここにいくつかのコードがあります (注: サンプルでは live() または delegate() 関数を使用していません):

(function($) {
    $.widget("ui.autoCompleteDDL", {
        _create: function() {
            var self = this;
            var select = this.element.hide();
            var _isHoverUl = false;

            var input = $("<input>")
                .addClass("ig_Edit igtxt_Edit")
                .width(select.width())
                .addClass(select.attr("class"))
                .removeClass("AutoComplete DropDownList")
                .click(function(e){this.select(); })
                .insertAfter(select)
                .autocomplete({
                    source: function(request, response) {
                        var matcher = new RegExp(request.term, "i");
                        response(select.children("option").map(function() {
                            var text = $(this).text();
                            if (!request.term || matcher.test(text))
                                return {
                                    id: $(this).val(),
                                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                    value: text
                                };
                        }));
                    },
                    delay: 100,
                    select: function(e, ui) {
                        if (!ui.item) {
                            // remove invalid value, as it didn't match anything
                            $(this).val("");
                            return false;
                        }
                        $(this).focus();
                        select.val(ui.item.id);

                        self._trigger("selected", null, {
                            item: select.find("[value='" + ui.item.id + "']")
                        });

                    },
                    minLength: 1
                })
                .blur(function(e){
                        var curInput= $(this);
                        if (!_isHoverUl){
                            setTimeout(function(){
                                curInput.val(select.get(0).options[select.get(0).selectedIndex].text);
                                input.autocomplete("close");
                            }, 150); // 150 is because of the autocomplete implementation.
                        }
                    });

            // Fix for the scrollbar in IE7/8
            $("body")
                .delegate(".ui-autocomplete", "mouseover", function(evt){ _isHoverUl = true;})
                .delegate(".ui-autocomplete", "mousemove", function(evt){input.focus();})
                .delegate(".ui-autocomplete", "mouseout", function(evt){_isHoverUl = false;});

            // Possibility of showing an arrow button.
            $("<div>&nbsp;</div>")
            .insertAfter(input)
            .addClass("ui-icon-combo-arrow")
            .mouseover(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); })
            .mouseout(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); })
            .removeClass("ui-corner-all")
            .css({"display":"inline"})
            .position({
                my: "left center",
                at: "right center",
                of: input,
                offset: "-1 0"
            })
            .attr("title", "")
            .click(function() {
                // close if already visible
                if (input.autocomplete("widget").is(":visible")) {
                    input.autocomplete("close");
                    return;
                }
                // pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
                input.focus();
            });

            input.val(select.get(0).options[select.get(0).selectedIndex].text);
        }
    });

})(jQuery);

$(function() {
    $("select.AutoComplete").autoCompleteDDL();
});

これが役に立ったことを願っています

于 2010-04-08T13:09:11.000 に答える