2

SlickGridの最新バージョンでカスタムオートコンプリートコンボボックスエディターを作成しようとしています。コンボボックスの主な目的は、ユーザーが入力したテキストに基づいて結果を表示することです。また、ユーザーが「オートコンプリート」関数に空白の引数を渡すことですべての結果を表示できるようにする下矢印リンクボタンが含まれます。これは、SlickGridでカスタムエディターとして作成しようとしているものを表示できるリンクです。（Pls。「基礎となる選択を表示」ボタンは無視してください）

ユーザーの入力に基づいて提案を取得することができました。また、[availableTags]配列のすべての項目を表示するはずの列フィールドの右側に、小さな矢印のリンクボタンが配置されています。矢印をクリックすると、基本的に応答しないすべてのアイテムが表示されません。ただし、ユーザーがリスト内のアイテムの1つと一致するものを入力した場合、ウィジェットが開いていることを意味します。矢印ボタンをクリックするとウィジェットは閉じますが、すべてのアイテムのリストは表示されません。DOMの処理で何か問題が発生していると思います。どんな助けでもありがたいです。

列を作成するためのソースコードは次のとおりです。

    var columns = [
        {id: "TestAuto", name: "Auto Complete", field: "TestAuto", minWidth:100,width:150, editor: Slick.Editors.Auto}
      ];

カスタムエディタコードは次のとおりです。

$.extend(true, window, {
    "Slick": {
      "Editors": {
        "Auto": AutoCompleteEditor,
        "Text": TextEditor,
        "Integer": IntegerEditor,
        "Date": DateEditor,
        "YesNoSelect": YesNoSelectEditor,
        "Checkbox": CheckboxEditor,
        "PercentComplete": PercentCompleteEditor,
        "LongText": LongTextEditor,
        "Combo": ComboTest
      }
    }
  });
  var availableTags = [
                        "ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                      ];

  function AutoCompleteEditor(args) {
     var $input;
     var defaultValue;
     var scope = this;
     var calendarOpen = false;



     this.init = function () {

       $input = $("<INPUT id='tags' class='editor-text' />");
       $input.width($(args.container).innerWidth() - 25);
       $input.appendTo(wrapper);


       $( "<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();
            });

       $input.focus().select();
       $input.autocomplete({
            source: availableTags
        });

     };


     this.destroy = function () {
       $input.autocomplete("destroy");
     };

     this.focus = function () {
       $input.focus();
     };

     this.loadValue = function (item) {
       defaultValue = item[args.column.field];
       $input.val(defaultValue);
       $input[0].defaultValue = defaultValue;
       $input.select();
     };

     this.serializeValue = function () {
       return $input.val();
     };

     this.applyValue = function (item, state) {
       item[args.column.field] = state;
     };

     this.isValueChanged = function () {
       return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
     };

     this.validate = function () {
       return {
         valid: true,
         msg: null
       };
     };

     this.init();
   }
4

1 に答える 1

3

この質問を投稿してしばらくして、ようやく解決策が見つかりました。提案ボックスにリストされているすべてのアイテムを表示するには、入力のオートコンプリート定義でminLengthを0に設定する必要があります。

$input.autocomplete({
                delay: 0,
                minLength: 0, //has to be 0 to bring all items in case the search contains empty string.
                source: availableTags
            });

この種の問題の解決策を長い間探していた人たちには申し訳ありません。

于 2012-12-03T17:08:58.283 に答える