2

我正在尝试在最新版本的 SlickGrid 中创建自定义自动完成组合框编辑器。组合框的主要目的是根据用户键入的文本显示结果，并且它还将包括一个向下箭头链接按钮，使用户可以通过将空白参数传递给“自动完成”函数来查看所有结果。这是您可以查看我正在尝试在 SlickGrid 中作为自定义编辑器创建的链接的链接。（请忽略“显示底层选择”按钮）

我能够根据用户输入获得建议，并且在列字段的右侧放置了一个小箭头链接按钮，该按钮应该显示 [availableTags] 数组中的所有项目。当我单击箭头时，它并没有列出基本上没有按预期响应的所有项目。但是，如果用户键入与列表中的某个项目匹配的内容，则意味着小部件已打开，单击箭头按钮后它会关闭但不会显示所有项目的列表。我想我在处理 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 回答